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微 信 小 程序 从 2017 年 1 月 9 日 上 线 以 来 ,取得 了 巨大 的 成 功 。2019 年 1 月 9 日 微 信 官 
方 公布 的 数据 显示 ,小 程序 已 覆盖 超过 200 个 细 分 行业 ,2018 年 小 程序 服务 超过 1000 亿 人 
次 用 户 ,年 交易 增长 超过 600% ,创造 了 超过 5000 亿 的 商业 价值 。 微 信 小 程序 的 蓬勃 发 展 
也 产生 了 巨大 的 人 才 需 求 缺口 , 微 信 小 程序 进 大 学 课堂 已 成 必然 趋势 。 

小 程序 (Mini Program) 是 运行 于 “大 程序 ”之 上 的 无 须 下 载 无 须 安装 、 触 手 可 及 和 用 完 
即 走 的 轻 量 级 应 用 。 微 信和 团队 为 小 程序 提供 的 框架 命名 为 MINA 应 用 框架 。MINA 框架 
通过 封装 微 信 客 户 端 提供 的 文件 系统 、 网 络 通信 ,任务 管理 和 数据 安全 等 基础 功能 ,对 上 层 
提供 一 整套 JavaScript API, 让 开发 者 能 够 非常 方便 地 使 用 微 信 客户 端 提供 的 各 种 基础 功 
能 与 能 力 ,快速 构建 一 个 应 用 。 

本 书 以 微 信 小 程序 开发 人 门 到 实战 为 定位 ,内 容 共 12 章 : 第 1 章 带领 读者 认识 微 信 
小 程序 ; 第 2 章 整 体 性 地 讨论 小 程序 的 框架 问题 ; 第 3 章 介 绍 常见 的 组 件 ; 第 4 章 介绍 
视图 层 的 样式 布局 ; 第 5 章 介 绍 逻 辑 层 JavaScript; 第 6 章 介 绍 小 程序 数据 库 操作 ; 第 7 
章 介绍 常见 的 网 络 接 口 ; 第 8 章 介 绍 常见 的 媒体 和 设备 接口 ; 第 9 章 介 绍 常 见 的 交互 和 
开放 接口 ; 第 10 章 介绍 微 信 小 程序 最 新 技术 一 一 云 开 发 ; 第 11、12 章 是 两 个 综合 性 
项 目 。 

考虑 到 大 部 分 高 校 开 设 过 “Java 程序 设计 ”课程 ,本 书 中 的 高 级 接口 均 采用 Java 作为 后 
端 开发 语言 ,案例 中 的 后 端 代码 附 有 注释 ,没有 Java 基础 的 读者 可 以 根据 注释 修改 成 自己 
需要 的 后 端 程序 。 全 书 的 110 个 知识 点 案例 代码 .9 个 小 型 实 训 项 目 代 码 和 2 个 大 型 实 训 
项 目 代 码 , 均 在 微 信 开 发 者 工具 和 真 机 中 调试 通过 。 

本 书 提供 850 分 钟 的 视频 讲解 ,扫描 书 中 相应 位 置 的 二 维 码 可 以 在 线 观 看 ; 本 书 还 提 
供 教学 大 纲 、 教 学 课件 .电子 教案 、 程 序 源码 和 教学 进度 表 , 扫 描 封 底 的 课件 二 维 码 可 以 
下 载 。 

本 书 可 作为 高 等 院 校 计算 机 相关 专业 学 生 学 习 微 信 小 程序 的 教材 ,也 可 供 对 小 程序 开 
发 感 兴趣 的 开发 人 员 广大 科技 工作 者 和 研究 人 员 参 考 。 

本 书 由 陈云 贵 和 高 旭 编 著 ,其 中 ,陈云 贵 负 责编 写 第 1 章 、 第 6 一 10 章 和 第 12 章 ,高 旭 
负责 编写 第 2 一 5 章 和 第 11 章 。 全 书 由 陈云 贵 审阅 定稿 。 
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微 信 团队 在 2019 年 1 月 9 日 的 微 信 公 开课 上 发 布 的 (2018 微 信 数 据 报告 显示 : 微 信 
与 WeChat 合并 后 活跃 账户 数 高 达 10.82 亿 ; 消息 日 发 送 次 数 450 亿 , 较 2017 年 增长 18%; 
音 / 视 频 通话 次 数 达 4.1 亿 次 , 较 2017 年 增长 100%; 在 出 行 、 零 售 、 和 餐饮、 公共 服务 领域 ， 
2018 年 每 月 支付 人 数 都 较 去 年 有 了 较 大 幅度 的 增长 ; 微 信 小 程序 开发 者 增加 了 80%; 从 社 
交 到 商业 , 微 信 已 经 深入 到 了 大 众生 活 的 方方面面 。 

本 章 主要 目标 

。 了 解 微 信 小 程序 产生 的 背景 和 应 用 前 景 ; 

。 了 解 小 程序 的 定义 .特征 和 * 大 程序 ”的 含义 ; 

。 熟练 掌握 微 信 小 程序 开发 者 工具 和 开发 者 管理 账户 的 操作 ; 

。 开发 第 一 个 微 信 小 程序 。 


1.1 微 信 小 程序 介绍 


微 信 小 程序 的 推出 并 非 一 跳 而 就 , 早 在 2016 年 1 月 的 微 信 公开 课 上 , 微 信之 父 张 小 龙 
就 透露 微 信和 即将 推出 应 用 号 ,而 彼 时 的 应 用 号 就 是 现在 的 微 信 小 程序 。 


1.1.1 微 信 小 程序 产生 的 背景 


在 小 程序 发 布 之 前 , 微 信 公众 平台 已 经 发 布 了 服务 号 ,订阅 号 和 企业 号 。 

。， 服务 号 : 连接 人 和 商品 ,很 多 电 商 企业 ,以 及 在 微 信 端 提供 产品 和 服务 的 企业 都 使 
用 服务 号 。 

。， 订 阅 号 : 微 信和 官方 的 定位 是 阅读 ,连接 人 和 资讯 。 订 阅 号 以 媒体 、 政 府 等 机 构 使 用 居多 。 

。， 企 业 微 信 ( 原 企业 号 ) : 企业 微 信 其 实 是 内 部 OA 的 集成 ,把 OA 搬 到 了 微 信 端 。 
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企业 微 信 可 以 理解 为 具有 办 公 管 理 功 能 的 普通 个 人 微 信 , 企 业 微 信 与 个 人 微 信 的 关系 
就 相当 于 企业 QQ 与 个 人 QQ 的 关系 。 而 订阅 号 与 服务 号 的 区 别 在 于 ,订阅 号 侧重 阅读 , 服 
务 号 侧重 服务 ,再 通俗 点 可 以 简单 理解 为 订阅 号 相当 于 文章 类 网 站 ,而 服务 号 则 定位 为 类 
App 和 类 功能 性 Web 系统 ,也 可 以 理解 为 服务 号 想 蔡 代 App ,减少 微 信用 户 安装 和 使 用 其 
他 App 的 概率 ,让 流量 在 微 信 大 生态 中 形成 闭环 。 例 如 笔者 自己 的 微 信 上 就 关注 了 “58 同 
城 “ 家 乐 福 中 国 “ 唯 品 会 ”等 服务 号 ,而 这 些 服 务 号 各 自 对 应 了 一 个 App, 如 果 用 户 不 想 安 
装 “ 唯 品 会 ”的 App, 使 用 “ 唯 品 会 ”服务 号 也 可 以 实现 用 户 想 要 的 功能 服务 。 

但 从 很 多 商家 和 企业 的 反馈 来 看 ,服务 号 依然 没有 达到 微 信 团队 预期 的 效果 。 因 为 服 
务 号 是 从 订阅 号 中 拆 分 出 来 的 ,服务 号 保留 了 订阅 号 太 多 的 基因 ,对 于 大 部 分 的 商家 来 说 ， 
二 者 只 是 出 现 的 位 置 不 一 样 ,发 送 消 息 的 次 数 限 制 不 一 样 。 在 这 样 的 背景 下 ,2017 年 1 月 9 
日 微 信和 团队 发 布 了 微 信 小 程序 ,可 以 说 小 程序 是 微 信 在 服务 号 的 基础 上 提高 企业 服务 能 力 

一 次 尝试 。 


1.1.2 ”什么 是 微 信 小 程序 


根据 腾讯 官方 微 信 小 程序 接 入 指南 的 定义 , 微 信 小 
程序 是 一 种 全 新 的 连接 用 户 与 服务 的 方式 , 它 可 以 在 微 


信 内 被 便捷 地 获取 和 传播 ,同时 具有 出 色 的 使 用 体验 。 张 小 龙 

张 小 龙 在 微 信 朋 友 图 对 小 程序 给 出 的 定义 (如 图 1.1 所 | 全 na 
示 ) 是 : 小 程序 是 一 种 不 需要 下 载 安装 即 可 使 用 的 应 打开 应 央 。 亿 体 现 了 风 完 妈 直 的 理念. 用 
用 , 它 实现 了 应 用 “触手 可 及 ”的 梦想 ,用 户 扫 一 扫 或 者 人 


搜 一 下 即 可 打开 应 用 。 也 体现 了 “用 完 即 走 ” 的 理念 ,用 
户 不 用 关心 是 否 安装 太 多 应 用 的 问题 。 应 用 将 无 处 不 
在 ,随时 可 用 ,但 又 无 须 安装 卸载 。 着 


1.1.3 小 程序 之 “大 程序 ” 


生物 学 中 有 寄生 生物 和 宿主 的 概念 , 即 两 种 生物 在 一 起 生活 ,一 方 受益 , 另 一 方 受害 ,后 
者 给 前 者 提供 营养 物质 和 居住 场所 ,这 种 生物 的 关系 被 称 为 寄生 。 小 程序 之 所 以 称 为 小 程 
序 ,也 有 类 似 的 含义 。 微 信 小 程序 是 运行 在 微 信之 上 的 ,如 支付 宝 小 程序 是 运行 在 支付 宝 之 
上 的 ,百度 智能 小 程序 是 运行 在 百度 App 之 上 的 。 微 信 小 程序 、 支 付 宝 小 程序 和 百度 智能 
小 程序 不 能 离开 微 信 、 支 付 宝 和 百度 App, 后 者 为 前 者 提供 运行 环境 和 底层 接口 ,它们 之 间 
犹如 寄生 生物 和 宿主 的 关系 一 般 。 

同时 , 微 信 小 程序 \ 支 付 宝 小 程序 和 百度 智能 小 程序 与 微 信 、 支 付 宝 和 百度 App 的 关系 
又 不 是 简单 的 前 者 依赖 后 者 ,前 者 还 有 效 地 扩展 了 后 者 的 功能 。 微 信 本 来 是 不 能 打车 的 ,“ 滴 
滴 出 行 ” 小 程序 接 入 微 信 之 后 ,用 户 可 以 不 离开 微 信和 而 实现 打车 功能 ; 支付 宝 本 来 是 没有 查询 
快递 的 功能 的 ,菜鸟 里 里 ”小 程序 接 入 支付 宝 之 后 ,用 户 在 支付 宝 上 就 可 以 查询 快递 信息 。 可 
以 说 微 信 小 程序 、 支 付 宝 小 程序 和 百度 智能 小 程序 让 微 信 、 支 付 宝 和 百度 App 变 得 更 强大 。 

笔者 从 这 层 依赖 和 扩展 关系 出 发 ,把 微 信 、 支 付 宝 和 百度 App 称 为 微 信 小 程序 、 支 付 宝 
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小 程序 和 百度 智能 小 程序 的 “大 程序 ”。 

1.5.2 节 将 会 介绍 百度 智能 小 程序 ， sl ee 
织 , 该 组 织 除了 百度 系 产 品 外 ,还 有 “ 爱 奇 世 ”*WiFi 万 能 钥匙 ”快手 “猎豹 移动 “携程 
“bilibili”“58 同城 “汽车 之 家 ”万 年 历 ”“ 宝 宝 巴 士 " 等 。 该 组 织 旨 在 共同 制定 标准 、 共 建生 
态 和 共享 流量 ,从 “大 程序 ”概念 来 看 ,“ 智 能 小 程序 开源 联盟 ”成 立 的 目的 就 是 要 让 智能 小 程 
序 的 “大 程序 ”更 大 。 

有 了 “大 程序 ”的 概念 之 后 ,笔者 把 小 程序 重新 定义 为 : 小 程序 是 运行 在 “大 程序 ”之 上 
的 应 用 , 它 无 须 下 载 .安装 和 印 载 ,同时 丰富 和 扩展 了 “大 程序 ”的 功能 。 


1.1.4 微 信 小 程序 应 用 前 景 


根据 阿拉 丁 《 微 信 小 程序 2019 年 1 月 份 TOP100 榜 单 》 发 布 的 数据 显示 ,跻身 TOP100 
活跃 度 的 小 程序 指数 从 高 到 低 依次 分 布 在 游戏 网络 购 物 .生活 服务 .视频 ,内 容 资讯 .工具 、 
旅游 .餐饮 ,图片 摄影 ,大 健康 、. 线 下 零售 .教育 .音频 .商业 服务 和 社交 等 领域 。 人 们 经 常 在 
微 信和 群 看 到 各 式 各 样 的 小 程序 转发 信息 ,可 以 说 小 程序 的 应 用 领域 是 很 广 的 。 那 什么 场景 
合适 开发 小 程序 应 用 呢 ? 笔者 总 结 如 下 。 

1. 快 进 快 出 的 使 用 场景 

无 须 安 装 , 即 扫 即 用 ,小 程序 非常 适合 一 些 快 进 快 出 的 场景 。 所 谓 快 进 快 出 ,就 是 说 平 
时 用 不 到 ,临时 用 一 下 ,用 完 立 即 退出 ,以 后 可 能 永远 不 会 再 用 。 壁 如 餐厅 点 餐 , 商 家 在 餐桌 
上 放置 一 个 小 程序 的 二 维 码 , 用 户 使 用 微 信和 扫描 功能 扫描 一 下 二 维 码 , 即 进 入 了 点 餐 小 程 
序 。 用 户 可 以 在 小 程序 上 实现 浏览 菜品 、 选 择 菜 品 ,调整 已 选 菜品 、 下 单 结账 付款 和 点 评 等 
功能 。 因 为 用 户 只 是 偶尔 到 某 一 餐厅 吃 顿 饭 而 已 ,没有 必要 关注 他 们 的 公众 号 、 服 务 号 ,更 
不 愿意 下 载 他 们 的 App, 用 小 程序 点 完 餐 、 结 完 账 ,与 这 家 餐厅 就 没有 关系 了 ,这 就 是 快 进 
快 出 。 试 想 一 下 如 果 一 个 餐厅 强行 地 让 客户 下 载 他 们 的 App, 哪 怕 是 客户 因为 想 拿 奖 券 而 
下 载 了 ,客户 又 会 保留 这 个 App 在 自己 的 手机 上 多 久 呢 ? 恐怕 出 门 后 就 卸载 了 。 

同类 的 场景 还 有 很 多 , 壁 如 医院 挂号 、 各 种 会 员 卡 、 火 车 票 订 票 抢 票 和 小 游戏 等 。 很 多 
失败 的 创业 案例 都 已 经 证 明 过 ,让 用 户 为 低频 应 用 下 载 一 个 App 或 关注 公众 号 ,都 是 非常 
难 的 事 ,营销 成 本 很 高 。 其 实 很 多 时 候 商 家 并 不 是 很 需要 用 户 成 为 自己 的 “粉丝 ”, 至 少 吸收 
“粉丝 ”不 是 商家 的 核心 需求 ,商家 的 核心 需求 是 让 用 户 方便 快捷 地 完成 交易 过 程 。 小 程序 
足够 满足 核心 需求 ,双方 都 省 心 .省 时 、 省 力 , 何 乐 而 不 为 呢 ? 

在 线 教育 平台 “三 节 课 ” 创 始 人 认为 大 部 分 的 服务 和 几乎 所 有 的 初创 业务 都 是 可 以 接 入 小 
程序 的 。 他 按照 刚 需 / 非 刚 需 , 高 频 /低频 ,将 互联 网 产品 分 别 放 入 四 个 象限 ,如 图 1.2 所 示 。 

如 果 服 务 是 高 频 的 ,而 且 对 于 交互 和 界面 体验 的 要 求 很 高 .还 是 要 用 原生 App(Native 
App) 来 做 。 但 如 果 服 务 是 低频 /中 频 且 重要 的 服务 ,建议 商家 加 入 微 信 小 程序 。 图 1.3 显示 
的 是 相关 象限 中 应 用 的 优选 方案 。 

象限 1: 行业 巨头 、 高 频 应 用 不 应 该 选择 小 程序 。 这 个 象限 基本 上 都 是 行业 巨头 ,例如 
“360”“ 百 度 “ 阿 里 巴巴 “高 德 地 图 ”“ 滴 滴 出 行 支 付 宝 “招商 银行 “新 东方 ”等 ,这 些 应 用 
因为 用 户 经 常 需要 打开 ,交互 频次 很 高 ,用户 对 应 用 的 体验 要 求 也 很 高 ,可 以 说 象限 1 的 服 
务 只 合适 应 用 App, 从 某 种 程度 上 讲 小 程序 在 该 象限 是 不 合适 的 。 
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高 频 
如 要 和 优 基 :快手 站 入 口 类 : 百度 搜索 、 淘 宝 
内 容 型 : 知 乎 深度 工具 : 地 图 、 浏览 品 。 汪 清册 和 
国 坟 关 付 宝 、 工 商 银行 
游戏 类 : 休闲 游戏 、 | \ 型 游戏 s: 籁 信 、 卫 卫 
社区 类 : 贴吧 、 知道 各 敬 题 库 、 新 东方 
3 刚 需 
4 
非 刚 需 2 
小 众 社区 生活 服务 类 : 58 同城 、 智 联 招 聘 
小 工具 O20 类 : 上 门 保养 、 代 名 
专业 产品 投资 类 : 理财 产品 、 众 筹 产品 


旅游 类 : 携程 、 攻 略 类 产品 


低频 


SA 


图 1.2 互联 网 产品 象限 分 类 


八 
高 频 
小 程序 为 入 口 下 
人 原生 App 
3 1 刚 需 » 
Sr 
旧 刚 需 4 2 
山 低频 


图 1.3 小 程序 在 服务 领域 的 应 用 匹配 


象限 2: 应 该 毫 不 犹 殉 地 拥抱 小 程序 。 这 个 象限 包含 大 量 的 服务 类 产品 一 一 教育 、 医 
ee 12306”。 总 之 ,但 
凡 用 户 一 年 用 一 两 次 之 后 就 再 也 想 不 起 来 的 ,是 不 应 该 用 一 个 原生 App 应 用 的 方式 让 用 户 
下 载 的 ,而 应 该 使 用 微 信 小 程序 来 解决 。 初 创 型 企业 也 应 该 通过 小 程序 来 试探 MVP( 开 发 
团队 通过 提供 最 小 化 可 行 产 品 获取 用 户 反 馈 , 并 在 这 个 最 小 化 可 行 产品 上 持续 快速 迭代 , 直 
到 产品 达到 一 个 相对 稳定 的 状态 ) ,因为 微 信 拥 有 天 然 的 传播 能 力 和 客户 拓展 能 力 ,而 原生 
App 应 用 除了 开发 比较 复杂 外 ,推广 成 本 极 高 , 获 客 成 本 极 高 ,这 些 都 阻碍 了 MVP 的 产品 
试探 。 从 这 个 角度 来 说 ,小 程序 能 让 初创 的 互联 网 公司 减少 试 错 成 本 ,提升 成 功 概率 。 

象限 3: 利用 微 信 的 开放 性 ,吸引 用 户 到 自 有 产品 中 。MVP 后 ,尽快 引导 到 自 有 产品 ， 
因为 自 有 产品 能 提供 更 好 的 服务 ,并 且 能 留 住 用 户 ,典型 代表 如 “ 知 乎 "和 “网 易 云 音乐 "。 内 
容 型 的 产品 ,通过 微 信 获 得 新 用 户 ,然后 转移 到 自 有 平台 ,也 是 一 个 很 好 的 策略 。 
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象限 4: 视 情 况 接 入 ,主要 视 开 发 能 力 而 定 。 该 象限 很 多 都 是 个 人 兴趣 产品 、 工 具 产 品 ， 
可 以 从 MVP 的 角度 来 做 ,或 者 以 兴趣 的 角度 来 做 ,不 考虑 太 多 的 商业 产 出 ,只 考虑 情怀 ,但 
这 些 开发 者 存在 明显 的 问题 ,就 是 产品 设计 能 力 和 开发 能 力 有 限 。 所 以 ,如 果 公 司 拥 有 App 
开发 能 力 , 那 就 保留 App; 如 果 公 司 App 方面 的 开发 能 力 有 限 , 则 可 以 优选 微 信 小 程序 。 

2. 传统 触 屏 机 器 的 屏幕 转移 

传统 触 屏 机 器 ,包括 自动 柜员 机 、 自 动 售 货机 ,以 及 电影 票 、 火 车 票 等 自动 出 票 机 等 。 这 
类 机 器 的 主要 特征 就 是 通过 屏幕 来 显示 信息 ,通过 触 屏 或 按键 来 进行 交互 。 缺 点 主要 是 触 
障 不 灵敏 .输入 信息 很 麻烦 ,如 果 涉 及 支付 的 话 , 那 就 更 麻烦 了 。 如 果 把 这 些 屏 幕 去 掉 ,而 改 
用 微 信 扫描 机 器 上 的 二 维 码 ,在 小 程序 中 显示 机 器 的 交互 界面 ,不 但 可 以 克服 这 些 缺 点 ,还 
可 以 提供 更 好 的 用 户 体 验 。 这 不 仅 是 去 掉 了 屏幕 ,节省 了 成 本 ,更 重要 的 是 设备 的 形态 ,其 
至 商业 模式 都 可 能 会 发 生 改 变 。 

以 自动 售 货 机 为 例 ,去 掉 机 器 上 的 屏幕 , 换 为 二 维 码 ,手机 扫描 后 即 可 进入 一 个 类 似 于 
电 商 App 的 小 程序 界面 。 传 统 自动 售 货 机 因为 要 通过 透明 玻璃 门 来 展示 货品 ,所 以 多 是 销 
售 标准 化 的 .常见 的 货品 ,如 饮料 等 。 使 用 小 程序 后 ,展示 的 信息 更 丰富 ,就 可 以 售卖 非 标准 
化 的 ,非常 见 的 货品 。 顾 客 也 不 再 需要 通过 货品 的 外 观 来 选择 货品 ,只 需要 在 手机 上 浏览 。 
这 样 ,货品 的 摆 放 方式 就 可 以 更 加 有 效 利用 空间 。 类 似 于 电 商 App 的 界面 设计 ,交互 体验 
也 会 丰富 得 多 ,不 仅 可 以 查看 货品 的 详情 ,还 可 以 进行 货品 的 组 合 促销 ,在 小 程序 端 直 接 完 
成 支付 ,甚至 还 可 以 有 积分 等 。 这 样 的 自动 售 货 机 可 以 有 效 降低 硬件 成 本 ,提升 购物 体验 。 
随 着 小 程序 的 诞生 和 推广 ,很 多 领域 已 经 不 可 以 用 旧 的 思维 方式 做 经 验 管理 ,小 程序 甚至 可 
能 催生 出 新 的 商业 模式 。 

3. 微 信 自身 的 深度 结合 

小 程序 可 以 分 享 给 好 友和 微 信 群 ,这 就 相当 于 在 不 离开 微 信 这 个 大 生态 的 环境 下 ,实现 
应 用 和 微 信 的 信息 互通 。 这 对 于 虚拟 社区 类 产品 ,企业 内 部 服务 类 产品 来 说 ,可 能 会 是 个 
福音 。 

例如 对 企业 内 部 工作 流程 进行 管理 的 小 程序 ,就 可 以 随时 把 工作 流程 通知 给 相关 的 
参与 者 ,参与 者 也 能 迅速 进入 工作 流程 中 进行 处 理 。 同 样 还 有 社区 类 产品 ,一 旦 接 入 微 
信 的 通信 能力 ,就 能 极 大 弥补 社区 类 产品 在 即时 通信 方面 的 不 足 。 即 便 仅 把 微 信 当 成 一 
个 信息 推送 工具 ,也 会 非常 有 价值 。 传 统 App 开发 商都 会 遇 到 推送 消息 失败 ,或 者 被 屏 
项 的 问题 , 当 统 一 由 微 信 来 接管 时 ,这 种 问题 自然 而 然 就 消失 了 , 没 人 会 怀疑 微 信 的 消息 
处 理 能 力 。 

小 程序 的 应 用 前 景 是 很 光明 的 ,腾讯 和 高 校 教育 机 构 正在 积极 推广 徽 信 小 程序 进 大 学 
课堂 ,相信 越 来 越 多 的 IT 人 将 从 事 小 程序 开发 工作 , 越 来 越 多 的 小 程序 会 进入 我 们 的 生 
活 中 。 


1.2 小 程序 特征 


从 张 小 龙 对 微 信 小 程序 的 定义 来 看 ,小 程序 的 特征 是 : 无 须 安装 、 触 手 可 及 、 用 完 即 走 、 
无 须 卸 载 , 除 此 之 外 它 还 具有 唯一 性 、 新 零售 人口 丰富 和 传播 能 力 强 的 特点 。 
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(1) 唯一 性 一 一 小 程序 名 称 具有 唯一 性 ,这 一 点 和 域名 类 似 , 某 一 名 字 被 注册 之 后 别人 
就 不 能 注册 同名 小 程序 了 ,这 也 滋生 了 一 些 抢 注 行 为 ,现在 很 多 行业 和 地 域 性 词汇 已 经 被 人 
抢 注 了 。 

(2) 新 零售 一 一 小 程序 是 新 零售 的 最 好 落地 工具 ,相信 大 家 可 以 经 常 在 小 区 附近 的 门 
店 看 到 微 信和 支付 宝 小 程序 的 二 维 码 。 

(3) 入 口 丰富 一 一 小 程序 目前 人口 有 近 40 种 ,其 中 使 用 较为 普遍 的 是 手机 桌面 ( 暂 只 
支持 Android) 、 微 信 搜 索 、. 附 近 的 小 程序 、 线 下 扫 码 、 微 信 菜 单 “ 发 现 ”小 程序 识别 码 、 好 友 
分 享 、 公 众 号 关联 和 菜单 直达 等 。 

(4) 传播 能 力 强 一 一 因为 有 近 40 种 流量 入口 ,加 上 小 程序 背 靠 微 信 这 一 大 生态 ,使 得 
微 信 小 程序 的 传播 能 力 极 强 ,这 也 是 初创 企业 选择 小 程序 的 一 个 重要 原因 。 

小 程序 是 微 信 公 众 平台 上 和 公众 号 平行 的 产品 ,同时 微 信 小 程序 从 功能 上 又 是 App 和 
H5 的 竞争 对 手 。 下 面 分 别 对 公众 号 与 小 程序 、 小 程序 与 App、 小 程序 与 H5 的 特征 区 别 做 
出 总 结 ,如 表 1.1 一 表 1.3 所 示 。 


表 1.1 公众 号 与 小 程序 的 特征 区 别 


对 比 项 公 众 号 小 程序 
定位 服务 于 营销 与 信息 传递 面向 产品 与 服务 
实现 技术 基于 H5 基于 微 信 自身 开发 环境 与 开发 语言 
用 户 体验 操作 延 时 较 大 体验 接近 原生 App 
接口 数量 较 好 丰富 的 接口 ,详细 请 参考 后 续 章节 
入口 较 多 入 口 丰富 ,新 增 一 些 入 口 ,例如 附件 的 小 程序 


表 1.1 显示 了 公众 号 与 小 程序 的 特征 区 别 。 公 众 号 的 定位 是 用 于 信息 的 传递 ,实现 人 
与 信息 的 连接 , 它 借助 H5 技术 实现 ,而 小 程序 的 定位 则 是 面向 产品 和 服务 的 类 App 应 用 ， 
开发 者 需 始终 记 住 微 信 小 程序 是 腾讯 为 了 替代 App 形成 微 信 流量 闭环 而 打造 的 产品 。 公 
众 号 有 粉丝 关注 的 概念 ,而 类 App 的 小 程序 没有 这 个 概念 。 因 为 有 粉丝 的 概念 ,公众 号 可 
以 发 送 消息 ,而 小 程序 只 能 发 送 特殊 的 模板 消息 ( 见 9.5 节 )。 因 为 底层 技术 的 不 同 ,公众 号 
页 面 的 打开 速度 往往 没有 小 程序 快 ,而 小 程序 可 以 达到 接近 App 的 速度 体验 。 


表 1.2 小 程序 与 App 的 特征 区 别 


对 比 项 小 程序 App 

下 载 安 装 无 须 下 载 无须 安装 需要 下 载 安 装 
开发 版 本 开发 一 个 版 本 安 卓 和 苹果 两 个 版 本 
开发 成 本 较 低 较 高 

推广 成 本 拥抱 微 信 流 量 , 较 低 原生 流量 , 较 高 

用 户 体验 度 一 般 较 好 


表 1.2 显示 的 是 小 程序 与 App 之 间 的 特征 区 别 。 很 多 人 把 小 程序 和 App 看 成 对 手 关 
系 , 也 有 人 把 它们 看 成 补充 关系 。App 面向 所 有 的 智能 手机 用 户 , 微 信 小 程序 面向 微 信用 
户 。App 需要 开发 安 卓 和 苹果 两 个 版 本 ,而 小 程序 则 不 需要 ,另外 小 程序 的 开发 效率 也 明 
显要 比 App 高 ,当然 小 程序 还 做 不 到 App 那样 良好 的 用 户 体验 。 
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表 1.3 小 程序 与 HS 应 用 的 特征 区 别 


对 比 项 小 程序 HS 应 用 

运行 环境 运行 在 微 信 上 运行 在 浏览 器 上 

用 户 体验 较 流畅 实际 上 是 打开 一 个 网 页 ,流畅 度 差点 
开发 成 本 很 多 功能 被 封装 成 接口 ,开发 成 本 低 | 比较 依赖 个 人 开始 经 验 

系统 权限 受益 于 微 信 , 较 多 较 少 

PC 支持 问题 不 支持 PC 打开 支持 


表 1.3 显示 了 小 程序 与 H5 之 间 的 特征 区 别 。 很 多 人 把 小 程序 和 H5 作对 比 ,其 实 是 不 
适合 的 ,因为 它们 从 概念 上 就 不 在 一 个 层级 ,小 程序 是 一 种 应 用 ,而 H5 是 超 文本 标记 语言 
HTML 的 第 五 次 修订 版 本 ,也 就 是 说 H5 是 一 种 技术 , 拿 一 种 应 用 和 一 种 技术 作对 比 肯 定 
是 不 合适 的 ,应 该 对 比 的 是 小 程序 和 H5 应 用 。 

小 程序 的 运行 环境 是 微 信 开发 团队 基于 浏览 器 内 核 完全 重 构 的 一 个 内 置 解析 器 ,有 和 针 
对 性 地 做 了 优化 ,配合 自 定义 的 开发 语言 标准 ,提升 了 小 程序 的 性 能 ,从 流畅 度 上 看 小 程序 
有 对 H5 应 用 的 优势 。 另 外 ,因为 微 信 团队 把 许多 功能 封装 成 了 小 程序 接口 ,这 使 得 小 程序 
开发 效率 提高 了 很 多 ,自然 也 就 降低 了 开发 成 本 。 因 为 不 同 的 开发 者 使 用 不 同 的 工具 ,不 同 
的 开发 者 的 开发 经 验 也 不 一 样 , 导 致 H5 开发 的 效率 非常 依赖 个 人 情况 。 当 然 小 程序 只 能 
寄生 在 微 信 这 个 环境 也 是 它 的 弱点 ,而 H5 应 用 可 以 计算 机 和 手机 自 适应 则 是 它 的 优点 。 

相信 通过 此 节 中 公众 号 与 小 程序 、 小 程序 与 App、 小 程序 与 H5 应 用 的 对 比 ,读者 对 公 
众 号 开发 .小 程序 开发 .App 开发 和 H5 开发 有 了 较 深 刻 的 理解 ,选择 哪 种 应 用 开发 需要 具 
体 问 题 具体 分 析 。 


1.3 微 信 小 程序 开发 准备 


学 习 者 以 前 学 习 C 语言 或 者 Java 语言 之 类 编程 语言 的 时 候 , 下 载 开发 工具 并 做 一 些 
环境 配置 就 可 以 进行 开发 了 。 但 是 微 信 小 程序 的 开发 在 下 载 开发 者 工具 之 前 ,开发 者 需 
要 先 在 微 信 公众 平台 上 申请 好 一 个 小 程序 管理 账号 ,因为 需要 使 用 绑 定 了 小 程序 管理 账 
号 的 微 信 账号 扫描 二 维 码 才 可 以 进入 开发 者 工具 。 下 面 介绍 小 程序 管理 账号 的 申请 和 
配置 过 程 。 


1.3.1 申请 小 程序 账号 


开发 者 应 该 在 微 信 公 众 平台 网 址 https://mp.weixin.qq.com/cgi-bin/wx 注册 小 程序 
管理 账号 ,目前 微 信 小 程序 注册 面向 个 人 企业、 政府 .媒体 和 其 他 组 织 开 放 , 而 支付 宝 小 程 
序 目 前 个 人 开发 者 还 处 于 公测 阶段 ,支付 宝 小 程序 只 正式 对 企业 开发 者 开放 。 下 面 对 注册 
流程 做 简单 介绍 。 每 一 个 学 习 者 都 需要 按照 如 下 的 流程 注册 一 个 自己 的 小 程序 管理 账号 ， 
因为 如 果 没 有 注册 这 样 一 个 账号 ,开发 者 就 不 可 以 登录 到 开发 者 工具 上 ,也 就 谈 不 上 开发 、 
发 布 和 运营 小 程序 了 。 
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图 1.4 显示 了 微 信 小 程序 的 接 入 流程 ,依次 是 注册 小 程序 账号 、 小 程序 信息 完善 .开发 
小 程序 及 提交 审核 和 发 布 。 


接 入 流程 


1 | 注册 
在 向 信 公 众 平台 注册 小 程序 ， 完 志 主 册 后 可 以 同步 进行 信息 完善 和 开发 . 


2 ) 小 程序 信息 完善 
培 写 小 程序 基本 信息 ， 包 括 名 称 、 头 像 ， 介 绍 及 服务 范围 等 


3 开发 小 程序 
完成 小 程序 开发 者 九 定 、 开 发 信息 配置 后 ， 开 发 者 可 下 载 开发 者 工具 、 和 参考 开发 文档 潮 行 小 程序 的 
开发 和 油 江 . 


完成 小 程序 开发 后 ， 提 交代 码 至 仇人 信 团 队 审 核 ， 审 核 通过 后 即 可 发 布 〈 公 测 明 间 不 能 发 布 ) . 


图 1.4 微 信 小 程序 接 和 人 流程 


下 面 对 申 请 小 程序 管理 账号 进行 讲解 。 

在 填写 注册 信息 的 时 候 需要 注意 的 是 ,填写 的 这 个 邮箱 必须 没有 绑 定 过 个 人 微 信 ,也 没 
有 注册 过 微 信 公 众 平 台 下 的 订阅 号 或 者 服务 号 。 假 如 一 些 自 媒体 朋友 的 邮箱 已 经 注册 过 订 
阅 号 或 者 服务 号 , 则 需要 更 换 新 邮箱 来 注册 小 程序 ,如 图 1.5 所 示 。 


作为 登录 帐号 ， 请 填写 未 被 侈 信 公 众 平台 注册， 未 被 侈 信 开 放 平 台 注册 ， 未 被 个 人 柚 
信号 爷 定 的 邮箱 


号 ， 截 短 8 位 ， 区 分 大 小 写 


确认 证 码 。 seeeeeeeeeee 


请 再 次 输入 密码 


om TIN 革 。， 


你 已 阅读 并 同意 《 娄 信 公众 平台 服务 协议 》 及 《 伊 信 /小 程序 平台 服务 条 款 》 
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小 程序 系统 会 发 送 一 份 确认 邮件 到 注册 时 填写 的 邮箱 中 ,如 图 1.6 所 示 。 单 击 收 到 的 
激活 邮件 的 “确认 ?链接 即 可 进入 图 1.7 的 界面 。 


Be 


激活 公众 平台 帐号 
省 下 于 及 邮箱 : 7700599ep 读 i 六 入 邮 和 


感 刘 注册 ! 确认 邮件 
坦 看 邮件 ， 并 注 ; 


图 1.6 邮箱 确认 注册 


主体 信息 登记 


身份 证 姓名 陈云 贵 


信息 审核 成 功 后 身份 证 姓名 不 可 修改 ; 如 果 名 字 包 含 分 隅 号 请 勿 省 路 


身份 证 号 码 36072200000EEPE= 


请 输入 您 的 身份 证 号 码 ， 一 个 身份 证 号 码 只 能 注册 5 个 小 程序 


管理 员 手 机 号 码 。 188188 针 0 


请 输入 您 的 手机 号 码 个 手机 号 码 只 能 注册 5 个 小 性 序 ， 
短信 验证 码 787879 无 法 接收 验证 码 ? 
请 输入 手机 短信 收 到 的 6 位 验证 码 


管理 员 身份 验证 


图 1.7 “主体 信息 登记 "界面 


图 1.7 是 比较 关键 的 一 步 , 这 一 步 需 要 开发 者 填写 真实 的 姓名 、 身 份 证 号 码 和 手机 号 
码 ,并 且 需 要 用 个 人 微 信 号 扫描 图 中 的 二 维 码 来 绑 定 该 小 程序 管理 账户 ,这 一 点 和 公众 号 的 
注册 类 似 , 但 是 需要 注意 的 是 填写 的 姓名 、 身 份 证 号 码 需要 和 用 来 绑 定 的 这 个 微 信 保持 身份 
一 致 。 例 如 张 三 注册 小 程序 管理 账户 , 则 需要 用 张 三 的 微 信 来 绑 定 ,而且 需要 是 张 三 已 经 实 
名 认证 过 的 微 信和 来 绑 定 ,用 李 四 的 微 信 或 者 用 一 个 没有 实名 认证 的 微 信和 来 扫描 图 中 的 二 维 
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码 都 将 出 错 。 正 确 完成 主体 信息 登记 后 , 单 击 界面 右 下 角 的 “继续 ”按钮 ,进入 “确认 信息 ” 界 


面 ,如 图 1.8 所 示 。 


主体 信息 提交 后 不 可 修改 


图 1.8 “确认 信息 "界面 
单 击 图 1.8 中 的 “确定 ”按钮 完成 小 程序 管理 账号 的 注册 过 程 。 


1.3.2 ”完善 信息 


完成 上 面 的 注册 流程 后 ,开发 者 可 以 使 用 注册 好 的 账号 进入 小 程序 后 台 管 理 界面 ,需要 


对 小 程序 进行 信息 完善 


,还 需要 设置 该 小 程序 的 开发 者 信息 和 管理 员 , 如 图 1.9 所 示 。 


:让 程 
小 程序 发 布 流程 
step 
1 小 得 序 信息 ”补充 小 程序 的 基本 信息 ， 和 如 各 称 、 图 祭 、 描 述 等 
小 程序 开发 与 管理 
开发 工具 。。 下载 开 发 者 工具 进 行 代码 的 开发 和 上 传 ， 普通 小 程序 开发 者 工具 。 小 游戏 开发 者 工具 


添 h0 开 发 者 。 添加 开发 者 ， 进 行 代码 上 传 
配置 服务 器 。 在 开发 设置 页 面 查 看 ApplD 和 AppSecret， 配 于 服务 器 域名 
帮助 文档 。。 可 以 阅读 入 门 介绍 (普通 小 程序 | 小 游戏 ) 、 开 发 文档 (普通 小 程序 | 小 游戏 ) ， 设 计 规 


step 
忆 版 本 发 布 。 。 先 提 交代 码 ， 然 后 提交 审核， 审核 通过 后 可 发 布 


RL 范 和 运营 规范 


图 1.9 小 程序 信息 完善 


单 击 图 1.9 中 的 “填写 "按钮 , 即 可 对 小 程序 的 信息 进行 完善 
称 、 小 程序 简称 、 小 程序 头像 介绍、 服务 类 目 .需要 说 明 的 是 小 程 
次 ,而 小 程序 头像 和 介绍 一 个 月 可 以 修改 5 次 。 


| 


。 完 善 的 内 容 有 小 程序 名 
序 名 称 一 年 只 可 以 修改 两 
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单 击 图 1.9 中 的 “添加 开发 者 ”按钮 ,可 以 添加 和 修改 小 程序 的 管理 员 、 开 发 者 、 运 营 者 、 
数据 分 析 者 和 体验 成 员 ,效果 如 图 1.10 所 示 ,小 程序 后 台 成 员 权限 如 表 1.4 所 示 。 


成 员 管 理 


管理 员 。 可 设 于 风险 操作 保护 、 风 险 摊 作 提醒 等 帐 呈 安 全 
项 目 成 员 。 管理 员 可 添加 小 程序 项 目 并 本 和 权限 ， 查 看 详细 说 明 。 ”还 可 添加 14 个 EN 
请 输 入 提示 关键 Q 
全 部 成 员 v 运 划 者 开发 者 @ 数据 分 析 者 (基础 分 析 ) 人 @ 
邮 - 
体验 成 员 . 更 用 体验 还 可 添加 15 个 添加 
图 1.10 “成 员 管理 ?界面 
表 1.4 小 程序 后 台 成 员 权限 
权 限 开 发 者 体 验 者 管 理 员 
开发 调试 VV ~ JV 
模拟 器 功能 JV ~ V 
使 用 体验 版 JV Vv JV 
真 机 预览 JV x ~ 
上 传 上 架 x 活 -ft 
后 台 管 理 功能 x x ~ 


从 表 1.4 可 以 看 出 ,管理 员 的 权限 大 于 开发 者 ,而 开发 者 的 权限 又 大 于 体验 者 。 这 里 需 
要 说 明 的 是 体验 版 是 指 小 程序 开发 完成 后 ,开发 者 将 小 程序 上 传 到 小 程序 管理 后 台 会 形成 
开发 版 本 ,而 这 个 开发 版 本 在 提交 审核 之 前 是 不 可 以 被 外 界 访问 的 。 为 了 让 非 开 发 身份 的 
体验 者 可 以 先 一 步 体 验 一 下 小 程序 的 整体 效果 ,管理 员 可 以 先 发 布 一 个 体验 版 ,这 时 候 体验 
者 可 以 通过 扫描 二 维 码 等 方式 在 微 信 上 使 用 体验 版 .而 外 界 的 其 他 用 户 是 找 不 到 该 小 程序 
的 。 当 管理 员 把 该 版 本 提交 审核 ,而 又 被 小 程序 官方 审核 通过 , 才 是 正式 的 发 布 成 功 ,这 时 
普通 用 户 才 可 以 访问 该 小 程序 。 具 体 的 体验 版 在 管理 后 台 的 操作 界面 如 图 1.11 所 示 。 可 
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以 简单 地 理解 为 体验 版 是 一 个 内 测 版 本 ,只 有 内 部 的 体验 者 可 以 访问 。 


线 上 版 本 
版 本 号 发 布 者 不 会 游泳 的 鱼 详情 
201 90703g 发 布 时 间 2019-07-04 08:14:00 
Wc 描述 不 会 游泳 的 鱼 在 2019 年 7 月 3 日 晚上 8 点 29 分 提交 上 传 
审核 版 本 
版 本 号 开发 者 不 会 游泳 的 鱼 详情 
716 提交 审核 时 间 “2019-07-16 12:54:00 
市 核 中 
描述 实 训 [项目 7 月 16 日 
开发 版 本 
版 本 开发 者 不 会 游泳 的 鱼 提交 审核 
716 提交 时 间 2019-07-16 12:44:00 
体验 版 剧 ] 
描述 实 训 项 目 7 月 16 晶 


图 1.11 管理 后 台 的 体验 版 本 


1.3.3 ”后台 介绍 


小 程序 后 台 提供 了 丰富 的 管理 功能 ,具体 的 有 版 本 管理 、 成 员 管 理 ` 反 馈 管理 .统计 、 附 
近 的 小 程序 ,物流 助手 、 客 服 、 模 板 消息 .开发 .推广 和 设置 。 后 台 操作 界面 如 图 1.12 所 示 。 


版 本 管理 : 展示 线 上 版 本 、 审 核 版 本 和 开发 版 本 (体验 版 本 在 这 一 范畴 ) 。 
成 员 管理 : 对 管理 员 、 开 发 者 、 运 营 者 和 体验 者 进行 管理 。 

反馈 管理 : 对 反馈 信息 进行 管理 。 

统计 : 小 程序 流量 统计 及 分 析 功 能 ,包括 历史 和 实时 的 访问 数据 ,访问 分 析 、 来 源 分 
析 、 人 和 群 画像 分 析 和 自 定义 分 析 等 功能 。 

附近 的 小 程序 : 开通 和 关闭 附近 的 小 程序 功能 。 

物流 助手 : 帮助 有 物流 需求 的 开发 者 ,快速 高 效 地 对 接 多 家 物流 公司 ,对 接 后 用 户 
可 通过 微 信 服务 查看 实时 物流 状态 :提升 用 户 体验 。 需 先 通过 微 信 认证 才 可 以 开通 
此 项 服务 。 

客服 : 可 添加 100 个 微 信 账 号 作为 在 线 客服 。 

模板 消息 : 模板 库 管理 。 
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会 首页 设置 
基本 设置 。 ”第 三 方 设置 。 ”关联 设置 。 关注 公众 号 违规 记录 
名 管理 a 
版 本 管理 
成 员 管理 基本 信息 
反馈 管理 
小 程序 名 称 大 学 教学 
参 统计 
小 程序 简称 未 设置 
3 功能 
附近 的 小 程序 小 三 序 头像 
物流 助手 
客服 小 程序 码 及 线 下 物 。 苇 江 
科 下 载 5 
模板 消息 
> 介绍 本 /| 开发 孝 : ， 欢 迎 大 ; 
收 和 隐 改 小 得 序 只 用 于 小 程序 开发 教学 使 用 ， 欢 迎 大 家 查看 
ba 推广 微 信 认证 未 认证 
流量 主 
息 
广告 主 主体 信息 陈 
全 设置 服务 类 目 教育 > 教育 信息 服务 


图 1.12 管理 后 台 界 面 


。 开发 : 运 维 中 心 ,开发 设置 \ 开 发 者 工具 和 接口 设置 ,首先 单 击 “ 开 发 "菜单 ,然后 单 
击 “ 开 发 设置 "按钮 可 以 进入 图 1.13 所 示 界 面 ,图 1.13 中 的 AppID 和 AppSecret 两 
个 参数 是 后 续 需要 经 常用 到 的 ,新 建 项 目的 时 候 需 要 用 到 AppID, 而 小 程序 支付 功 
能 需要 用 到 AppSecret。 


四 身份 确认 加 查看 AppSecret 
本 平台 不 再 明文 保存 appSecret 
AppID( 小 程序 ID) wxB800eb4453 
AppSecret( 小 程序 鹿角 ) 。 3b21cbff3c7df93ed96al 复制 


我 已 了 解 AppSecret 不 会 明文 存储 在 开发 平台 上 ， 并 且 已 复制 保存 好 该 ApPSecret 


图 1.13 AppID 和 AppSecret 
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。 推广 : 流量 主 和 广告 主 功能 ,这 一 功能 在 公众 号 中 也 有 。 
。 设置 : 基本 信息 设置 .第 三 方 设置 .关联 设置 .关注 公众 号 和 违规 记录 ,其 中 关联 设 
置 指 的 是 把 小 程序 和 公众 号 绑 定 起 来 。 


1.4 第 一 个 微 信 小 程序 


有 了 小 程序 管理 账号 之 后 ,开发 者 就 可 以 下 载 微 信 小 程序 开发 者 工具 来 开发 第 一 个 小 
程序 了 。 本 节 将 在 开发 者 工具 中 新 建 一 个 HelloWorld 项 目 。 


1.4.1 开发 者 工具 的 安装 


腾讯 官方 给 出 的 开发 者 工具 下 载 地 址 是 https://developers. weixin. qq. com/ 
miniprogram/dev/devtools/download.html?t 二 19030621, 开 发 者 也 可 以 百度 搜索 微 信 小 程 
序 开发 者 工具 ,然后 在 下 载 网 站 下 载 ,根据 自己 计算 机 的 情况 选择 合适 的 版 本 安装 即 可 。 因 
为 篇 幅 所 限 ,这 里 就 不 对 安装 过 程 做 说 明了 。 


1.4.2 第 一 个 小 程序 
[ 贺 1-1 第 一 个 微 信 小 程序 HelloWorld 项 目 创建 。 


如 图 1.14 所 示 , 进 入 小 程序 开发 者 工具 的 时 候 需 要 扫 码 ,而 这 个 时 候 
应 该 使 用 绑 定 了 小 程序 管理 账号 的 管理 员 或 者 开发 者 的 微 信 账号 来 扫描 。 


视频 讲解 因为 需要 扫 码 进入 ,也 就 意味 着 计算 机 没有 连接 网 络 的 话 是 进 不 去 开发 者 


工具 的 。 


微 信 开 发 者 工具 


欢迎 使 用 微 信 开 发 者 工具 


图 1.14 扫 码 进入 开发 者 工具 
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进入 开发 者 工具 可 以 开发 小 程序 .小 游戏 和 公众 号 网 页 ,如 图 1.15 所 示 , 选 择 “ 小 程 
序 ”, 然 后 单 击 界面 中 的 “十 ”按钮 来 新 建 小 程序 项 目 。 


0 \ 
小 程序 
小 游戏 
代码 片段 
公众 号 网 页 
+ 注销 ， 分 管理 


图 1.15 开发 者 工具 新 建 项 目 之 前 界面 


如 图 1.16 所 示 ,新 建 项 目的 时 候 合 理 的 做 法 是 先 在 “F:\miniprogram\chl1\ ”目录 下 新 
建 HelloWord 文件 夹 , 然 后 单 击 图 中 虚线 框 中 的 向 下 箭头 ,在 弹出 的 窗口 中 选择 
“下 :\miniprogram\chl\ HelloWorld” 文 件 夹 ,这 时 项 目 名 称 HelloWorld 会 被 自动 添加 上 。 
AppID 是 小 程序 管理 账号 中 取得 的 ,如 果 项 目 不 需 要 上 传 和 发 布 也 不 需要 使 用 云 开发 功 
能 ,可 以 单 击 图 中 的 “测试 号 ”, 系统 会 自动 生成 一 个 临时 的 AppID。 如 果 项 目 不 使 用 云 开 
发 功能 , 则 选择 “不 使 用 云 服务 ”“ 小 程序 云 开 发 ”将 在 第 10 章 中 讲述 。 单 击 “ 新 建 "按钮 即 
可 成 功 创建 项 目 HelloWorld。 

开发 者 工具 会 默认 自动 生成 一 个 HelloWorld 的 demo, 所 以 在 没有 写 代码 的 情况 下 项 
目 已 经 编辑 好 了 ,程序 效果 如 图 1.17 中 左 侧 的 模拟 器 所 示 。 关 于 开发 者 工具 的 使 用 将 在 第 
2 章 中 为 读者 详细 介绍 。 


1.4.3 项 目 发 布 和 提交 审核 


1.4.2 节 创 建 了 一 个 HelloWorld 项 目 , 本 节 介 绍 如 何 把 自己 开发 的 项 目 上 传 并 发 布 以 
便 供用 户 访问 。 如 图 1.18 所 示 , 单 击 开发 者 工具 左上 角 的 “上 传 ”菜单 , 即 可 把 项 目 上 传 到 
小 程序 云端 ,需要 说 明 的 是 开发 者 不 需要 购买 网 络 空间 ,腾讯 免费 为 开发 者 提供 了 云端 
空间 。 

然后 开发 者 需要 登录 到 小 程序 管理 账号 中 ,上 传 的 项 目 已 经 可 以 在 小 程序 管理 账号 中 
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™% SAmE 
项 | HelloWorld 
目 名 称 
4 允 目录 Fiminiprogram\cht\HelloWorld ! H 
代码 片段 ApplD -| 
公众 号 网 页 开发 模式 。 小 程序 
后 这 服务 ” 全 不 便 用 云 服务 
小 程序 云 开 发 
语言 ”JavaScript 
9 3 取消 
图 1.16 新 建 小 程序 项 目 
HelloWorld - 伺 信 开发 者 工具 v1.02.1902010 全 口 
| 顺 目 文件 蝙 贸 工具 界面 设置 柚 信 开发 者 工具 
佛 EE ES EB oo ‘rar 音 退 坟 译 "CC® Eo3 bb 全 » 
借 器 。 六 名 器 。 这 吴 。 云 开发 忽 环 预 交 。 页 机 三 试 。 切 后 台 。 清纯 
iPhone5 ~ 100% ~ WF ~ WM ~ dom + Q 人 
™ DD pages 
evee WeChats 2333 1% ey v DD ndex 
Wechat "加 We 
{) indexjson 
«> ndex weml 
nex wss 
» Dlogs 
中 us 
apps 
{) appjson 
we app wss 


Hello World 


{0) project config json 


图 1.17 


第 一 个 小 程序 HelloWorld 


® 2 © 
上 传 。 版 本 管理 。 社区 ”详情 


加 上 传代 码 完 成 5 分 和 前 > 


编译 后 代码 包 大 小 ，37. 3 KB 


图 1.18 项 目 上 传 
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查看 ,如 图 1.19 所 示 , 单 击 开 发 版 本 中 的 “提交 审核 按钮 , 即 可 进入 如 图 1.20 所 示 界 面 。 


线 上 版 本 

版 本 号 发 布 者 
20190703g 发布 Hj 
wc 描述 
审核 版 本 

版 本 号 开发 者 
716 提交 审核 时 间 
[ 讲 核 中 

sa 描述 
开发 版 本 

版 本 号 开发 者 
716 提交 时 间 
[版 副 找 玉 


不 会 游泳 的 鱼 
2019-07-04 08:14:00 


不 会 游泳 的 鱼 在 2019 年 7 月 3 日 晚上 8 点 29 分 提交 上 传 


不 会 游泳 的 鱼 
2019-07-16 12:54:00 


实 训 项 目 7 月 16 日 


不 会 游泳 的 鱼 
2019-07-16 12:44:00 


实 训 项 目 7 月 16 日 


详情 


图 1.19 小 程序 管理 账号 中 的 版 本 信息 


在 图 1.20 中 ,选中 “已 阅读 并 了 解 平台 审核 规则 ”, 然 后 单 击 " 下 一 步 ” 按 钮 , 即 可 进入 如 
图 1.21 所 示 界 面 。 开 发 者 不 得 提交 不 合 规 的 项 目 ,否则 无 法 通过 微 信和 团队 的 审核 。 

在 提交 审核 的 最 后 一 步 ,开发 者 需要 配置 功能 页 面 信息 ,如 图 1.21 所 示 。 开 发 者 需要 
至 少 配置 一 个 页 面 的 信息 ,按照 提示 信息 依次 配置 “功能 页 面 “ 标 题 ”所 在 服务 类 目 ”“ 标 
签 ? 信 息 , 然 后 单 击 * 提 交 审 核 ?按钮 ,完成 提交 审核 操作 。 

在 提交 审核 操作 之 后 ,审核 版 本 中 会 出 现 开发 者 最 新 提交 的 审核 版 本 , 待 微 信 团队 审核 
通过 ,项 目 就 会 转化 成 线 上 版 本 ,用 户 即 可 正常 访问 项 目 了 。 审 核 时 间 一 般 为 两 个 工作 日 。 
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提交 审核 的 相关 须知 Xx 


确认 提交 审核 ? 
提交 给 微 信 团队 审 核 前 ， 请 确保 : 


提交 的 小 程序 功能 完整 ， 可 正常 打开 和 运行 ， 而 不 是 测试 版 或 Demo 
小 程序 的 调试 和 预览 可 在 开发 者 工具 进行 。 多 次 提交 测试 内 容 或 Demo, 将 
受到 相应 处 罚 。 


已 仔细 阅读 《 微 信 小 程序 平台 运营 规范 》 和 《向 信 小 程序 平台 审核 常见 被 拒 
绝情 形 》 


J 已 阅读 并 了 解 平台 审核 规则 


L ws | 


图 1.20 确认 提交 审核 


配置 功能 页 面 至 少 填 号 一 组 ,填写 正确 的 信息 有 利于 用 户 快速 搜索 出 你 的 小 程序 


功能 页 面 1 
功能 页 面 pages/list/list Re 
标题 新 闻 小 程序 列表 页 16/32 
所 在 服务 类 目 教育 ~ 

功能 页 面 和 服务 类 目 必须 
标签 新 闻 小 程序 列 


标签 用 回 车 分 开 ， 填 写 与 页 面 功能 相关 的 标签 ， 更 容易 被 搜索 


(由 添加 功能 页 面 


图 1.21 配置 功能 页 面 信息 
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1.5 支付 宝 和 百度 小 程序 


微 信 小 程序 是 2017 年 1 月 9 日 正式 发 布 的 ,腾讯 公司 是 BAT 中 最 早 布局 小 程序 的 ; 
支付 宝 小 程序 于 2017 年 8 月 18 日 开始 公测 (对 企业 开发 者 开放 ) ,从 支付 宝 小 程序 官方 开 
发 者 社区 来 看 ,第 一 篇 帖子 发 布 在 2017 年 8 月 17 日 ; 百度 智能 小 程序 则 是 2018 年 4 月 12 
日 开始 公测 的 , 它 是 BAT 小 程序 最 迟 上 线 的 ,但 是 它 强 调 了 “智能 "二 字 。 所 以 ,有 初学 者 
问 小 程序 有 没有 发 展 前 景 ,能 不 能 火 起 来 ,笔者 的 回答 是 观察 BAT 争 相 布局 小 程序 就 大 概 
知道 它 的 前 景 了 。 


1.5.1 支付 宝 小 程序 


支付 宝 小 程序 官方 网 址 https://open.alipay.com/channel/miniIndex.htm, 蚂 蚁 金 服 开 
放 平台 官方 给 出 的 定义 是 : 支付 宝 小 程序 是 一 种 全 新 的 开放 模式 , 它 运 行 在 支付 宝 客户 端 ， 
可 以 被 便捷 地 获取 和 传播 ,为 终端 用 户 提供 更 优 的 用 户 体 验 。 支 付 宝 小 程序 开放 给 开发 者 
更 多 的 JSAPI( 原 生 APD) 和 OpenAPI( 开 发 能 力 APIT) 能 力 ,通过 小 程序 可 以 为 用 户 提供 多 
样 化 便捷 服务 。 

需要 说 明 的 是 支付 宝 小 程序 目前 只 正式 对 企业 开发 者 开放 ,而 个 人 开发 者 还 处 于 公测 
阶段 。 考 虑 到 大 部 分 读者 没有 企业 支付 宝 ,在 蚂蚁 金 服 开放 平台 还 没有 开放 个 人 开发 者 正 
式 注册 之 前 ,大 家 可 以 申请 公测 注册 。 考 虑 到 注册 流程 比较 占 篇 幅 , 而 且 支付 宝 小 程序 和 微 
信 小 程序 注册 的 流程 类 似 , 所 以 这 里 就 不 对 注册 流程 做 介绍 了 。 支 付 宝 小 程序 管理 后 台 如 
图 1.22 所 示 。 


jn 小 程序 大 学 教学 开发 管理 


@ rm a wn 
回 开发 管理 
ep 下 吉 支付 宝 小 各 序 开发 工具 "开始 开发 去 下 载 
回 成 员 管 理 
如 码 管理 
口 开发 之 前 请 先 添加 开发 者 成 员 ”去 添加 

园 生活 号 管理 
@ 数据 分 析 
包 附近 的 小 程序 口 查看 开发 教程， 在 支付宝 小 程序 开发 工具 -本 地 开发 ”去 查看 

云 监控 

云 区 (免费) 口 开 必 完 成 后 ,在 蛤 入 开发 者 工具 "中 打包 上 传 版 本 ， 版 本 上 传 后 手动 剧 新 当前 页 面 ， 可 提交 
日 模板 消息 


口 和 发 半 或 , 在 姑 名 白 名 单 "中 配置 域名 ， 否 则 无 法 访问 最 务 器 ”去 百 豆 


口 加 入 小 得 序 开发 者 钉 钉 群 ， 及 时 获取 最 新 动态 ， 立 即 生 码 加 入 


图 1.22 支付 宝 小 程序 开发 管理 


全 信 小 程序 
开发 从 入 门 到 实战 微 课 视 频 版 

支付 宝 小 程序 登录 的 时 候 也 是 通过 扫描 二 维 码 进 入 的 ,进入 管理 后 台 之 后 笔者 发 现 支 
付 宝 小 程序 管理 后 台 和 微 信 小 程序 管理 后 台 雷 同 ,具体 功能 就 不 做 介绍 了 

有 了 小 程序 账号 之 后 ,开发 者 就 可 以 到 官方 网 址 https:/ a dealin connie 
download 下 载 开发 工具 了 ,选择 适合 自己 计算 机 的 版 本 下 载 安装 即 可 。 

支付 宝 开发 者 工具 对 比 微 信 开 发 者 工具 最 大 的 区 别 是 提供 了 大 量 的 模板 ,使 得 开发 者 
可 以 快速 建立 小 程序 ,这 也 许 是 淘宝 应 用 市 场 思想 的 继承 ,如 图 1.23 所 示 。 支 付 宝 小 程序 
把 模拟 器 和 主编 辑 区 分 成 了 左右 两 个 窗口 ,如 图 1.24 所 示 , 而 微 信 小 程序 开发 者 工具 的 模 
拟 器 和 主编 辑 区 在 同一 个 窗 体 中 。 


小 程序 开发 者 工具 


两 过 小 得 序 快速 示例 创 过 项 目 


图 1.23 支付 宝 小 程序 新 建 项 目 


如 图 1.25 所 示 , 从 项 目 结构 上 看 ,支付宝 小 程序 沿用 下 目录 结构 , 同 
样 由 全 局 文件 和 普通 页 面 文件 组 成 ,但 在 文件 扩展 名 上 有 所 改变 。 微 信 小 程序 中 的 .wxss 
扩展 名 对 应 支付 宝 小 程序 的 acss, 微 信 小 程序 中 .wxml 扩 展 名 对 应 支付 宝 小 程序 的 .axml， 
此 外 ,js 和 json 扩展 名 没有 变化 。 由 此 可 见 ,开发 者 学 习 了 微 信 小 程序 开发 之 后 可 以 很 快 
地 迁移 到 支付 宝 小 程序 的 开发 上 来 。 


1.5.2 百度 智能 小 程序 


“春晚 红包 抢 的 好 ,瓜分 九 亿 不 嫌 少 ,百度 作为 央视 2019 年 春节 联欢 晚会 独家 网 络 互 
动 平 台 参 与 了 2019 年 的 春晚 红包 互动 。 和 前 几 年 的 微 信和 支付 宝 在 春节 联欢 晚会 的 抢 红 
包 活 动 一 样 ,百度 此 次 的 抢 红 包 活 动 吸 引 了 无 数 的 眼球 ,而 此 次 抢 红 包 活 动 的 承担 者 就 是 百 
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图 1.24 支付 宝 小 程序 项 目 窗口 


会 小 程序 小 程序 大 学 教学 


HelloWorld 


图 1.25 支付 宝 小 程序 项 目 目录 结构 


度 的 智能 小 程序 “春晚 摇 红 包 ”, 在 元 宵 期 间 “ 春 晚 摇 红包 ”智能 小 程序 又 变 身 成 了 “元 宵 揪 红 
包 ” 再 次 撒 钱 2 亿 元 。 

百度 智能 小 程序 目前 只 对 企业 和 组 织 开 放 注 册 。 相 比 微 信和 支付 宝 小 程序 ,百度 小 程 
序 的 特点 是 “更 自然 ,更 开放 、 更 智能 ”所谓 开 放 , 是 指 不 像 微 信 小 程序 只 能 在 微 信 上 运行 ， 
支付 宝 小 程序 只 能 在 支付 宝 上 运行 ,百度 小 程序 除了 可 以 在 百度 App 上 打开 之 外 ,将 来 还 
可 以 在 其 他 一 些 合 作 的 App 甚至 浏览 器 上 打开 。 说 到 这 个 ,就 要 说 到 百度 发 起 的 “智能 小 
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程序 开源 联盟 ”。 

“智能 小 程序 开源 联盟 ”的 核心 思想 是 生态 共 建 、 流 量 共享 和 商业 共 赢 。 生 态 共 建 指 的 
是 生态 伙伴 共 建 小 程序 技术 标准 和 生态 。 流 量 共享 是 指 生 态 伙伴 之 间 共 享 海量 分 发 资源 ， 
多 种 分 发 模式 共享 早期 流量 红利 。 商 业 共 赢 是 指 有 效 提升 用 户 的 使 用 时 长 及 频次 ,创新 商 
业 变 现 模式 带动 收入 增长 。 简 单 地 说 , 微 信 和 支付 宝 是 自家 的 小 程序 平台 ,而 百度 的 小 程序 
平台 是 开源 的 ,开放 给 了 “智能 小 程序 开源 联盟 ”的 成 员 , 这 些 成 员 开 发 的 小 程序 是 互通 互联 
的 。 目 前 加 入 “智能 小 程序 开源 联盟 ”的 商家 除了 百度 系 产品 外 ,还 有 “ 爱 奇 世 ”“WiFi 万 能 
钥匙 “快手 “猎豹 移动 “携程 “bilibili”*58 同城 “汽车 之 家 ”宝宝 巴士 "等 。 百 度 小 程序 
官方 给 出 的 “智能 小 程序 开源 联盟 ”部 分 成 员 名 单 如 图 1.26 所 示 。 


开源 联盟 小 伙伴 成 员 


20 + sane 30 亿 上 wo 


mES 他 )》 WiFi 万 能 铀 是 鱼 快 手 ee CH 
blibit 58 同 城 守之 让 Mwnsn reemeos 
Gzser Ba 党 mm 0 a Ba [> 好 看 视 吉 
Ba 帝王 opollo 百 民明 洲 DUERes 


图 1.26 “智能 小 程序 开源 联盟 ”部 分 成 员 


百度 智能 小 程序 同 微 信和 支付 宝 的 小 程序 存在 很 大 的 不 同 ,而 这 些 不 同 也 就 是 百度 知 
能 小 程序 的 优势 , 现 简 单 总 结 如 下 。 

(1) 百度 作为 搜索 引擎 为 小 程序 提供 搜索 入 口 。BAT 是 中 国 互联 网 最 大 的 流量 入 口 ， 
微 信和 支付 宝 的 流量 是 旗下 网 站 和 App 的 自 有 流量 ,但 是 百度 的 流量 是 搜索 流量 。 搜 索 流 
量 对 于 小 程序 从 业者 而 言 , 是 增 量 ,不 同 于 腾讯 的 社交 流量 和 阿里 的 电 商 流量 。 在 流量 价格 
变 得 昂贵 的 今天 ,大 量 搜索 流量 对 小 程序 从 业者 来 说 是 极 大 的 红利 ,这 也 促使 智能 小 程序 生 
态 吸引 更 多 的 开发 者 。 如 图 1.27 所 示 , 当 用 户 在 百度 App 搜索 框 中 输入 “申通 快递 ”, 搜 索 
结果 中 出 现 了 “申通 快递 智能 小 程序 ”。 

但 存在 的 问题 是 ,如 果 用 户 使 用 的 是 百度 手机 App 来 搜索 ,出 现 了 百度 智能 小 程序 , 自 
然 可 以 打开 该 小 程序 ,但 如 果 用 户 的 手机 浏览 器 不 是 百度 浏览 器 ,是 不 是 搜索 结果 中 不 应 该 
出 现 百度 智能 小 程序 呢 ? 笔者 在 OPPO 手机 浏览 器 搜索 “申通 快递 ”, 发 现 搜索 结果 中 还 是 
有 “申通 快递 智能 小 程序 ”, 但 是 点 击 该 小 程序 之 后 出 现 了 图 1.28 的 界面 ,页 面 提示 请 先 下 
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载 百度 App。 也 就 是 说 , 非 “智能 小 程序 开源 联盟 ”成 员 的 App 是 不 支持 百度 智能 小 程序 
的 ,但 相信 后 续 会 有 更 多 的 浏览 器 加 入 到 “智能 小 程序 开源 联盟 ”的 队伍 中 ,这 样 才 会 有 更 多 
的 浏览 器 能 打开 智能 小 程序 。 


EA 17:09 [可 
o 智能 小 程序 


党 申通 快递 回 


客服 电话 : 95543 > © 


申通 快递 > @ 


申通 快递 官网 客户 的 满意 ,申通 的 追求 ( © 
[em 


申通 快递 官网 ,申通 快递, 快递 ,发 快递 ,快递 员 ,业务 员 查 
询 , 上 门 取 件 ,在 线 下 单 ( 寡 件 ), 申 通 营业 网 点 查询 ,快递 … 


wapstocn 回 5021 © 


申通 快递 - 百度 智能 小 程序 


锡 申通 快递 


开 或 逢 最 新 版 本 
前 往 百度 App @ 


申通 快递 - 资讯 


申通 快递 的 股东 有 顾客 代 签 快递 ,申通 
多 缺 钱 ? 频 繁 股权 .。 ”快递 员 要 求 出 示 身 .… 


应 沼 
图 1.27 搜索 结果 中 的 百度 小 程序 图 1.28 在 非 百 度 App 中 打开 智能 小 程序 


(2) 智能 小 程序 可 以 在 百度 App 上 运行 ,理论 上 也 可 以 在 “智能 小 程序 开源 联盟 ”成 员 
的 浏览 器 和 App 上 和 运行。 这 是 理想 的 状态 ,笔者 尝试 在 “58 同城 "和 “快手 "两 个 App 上 寻 
找 小 程序 入 口 ,结果 发 现 上 述 App 还 没有 提供 小 程序 的 入 口 ,同样 在 “百度 地 图 ”App 上 也 
没有 找到 小 程序 的 入口 ,这 说 明 百 度 智能 小 程序 还 有 很 长 的 路 要 走 。 不 过 可 以 试想 一 下 , 当 
用 户 使 用 “百度 地 图 ”的 “发 现 周边 ”功能 的 时 候 , 除 了 可 以 看 到 周边 的 学 校 酒店 之 外 ,还 可 以 
找到 附近 的 小 程序 ， 当 用 户 点 开 “58 同城 ?上 一 条 房产 信息 的 时 候 , 在 发 布 者 信息 中 有 一 个 
按钮 可 以 直达 该 房产 中 介 公司 的 小 程序 ;“ 快 手 ”App 上 的 网 红 大 V 也 可 以 使 用 小 程序 构 
建 自己 的 个 性 空间 ,这 一 切 正 是 百度 智能 小 程序 的 遐想 空间 。 

(3) 除 此 之 外 ,智能 小 程序 为 开发 者 提供 了 很 多 的 特殊 接口 ,例如 来 自 百度 地 图 的 LBS 
接口 ,智能 语音 识别 的 接口 .百度 大 脑 AI 核心 技术 接口 等 。 智 能 小 程序 比 起 其 他 平台 的 小 
程序 来 ,可 以 说 更 加 智能 了 ,更 加 AI 化 了 ,这 种 体验 不 仅 比 H5 要 好 很 多 ,甚至 超出 一 般 的 
原生 App。 


小 程序 开发 基础 


本 章 将 介绍 小 程序 开发 基础 中 涉及 的 众多 概念 , 共 6 节 内 容 , 依 次 是 开发 者 工具 的 介 
绍 、 小 程序 项 目 结构 ,生命 周期 函数 、 人 逻辑 层 、 视 图 层 和 实 训 项 目 。 通 过 本 章 的 学 习 , 读 者 能 
初步 了 解 和 掌握 小 程序 开发 的 基础 知识 。 
本 章 主要 目标 
。 熟练 掌握 微 信 web 开发 者 工具 的 使 用 ; 
。 理解 与 掌握 小 程序 的 目录 结构 ,全 局 文件 的 作用 和 定义 、 页 面 文件 的 定义 、 应 用 级 和 
页 面 级 生命 周期 函数 的 执行 过 程 ; 
。 掌 握 小 程序 逻辑 层 数 据 的 定义 和 修改 、 页 面 处 理 函 数 、 自 定义 事件 函数 、 页 面 的 跳 
转 、 页 面 的 参数 传递 和 模板 的 概念 和 应 用 ; 
。 掌 握 小 程序 视图 层 中 数据 绑 定 条件 泻 染 、 列 表 泻 染 ,模板 的 概念 和 应 用 。 


2.1 开发 者 工具 介绍 


当 开 发 者 创建 项 目 之 后 ,弹出 如 图 2.1 所 示 的 微 信 web 开发 者 工具 的 界面 ,图 中 的 
加 一 @ 虚 线 区 域 分 别 是 菜单 栏 `. 工 具 栏 模拟 器 .目录 树 、 编 辑 器 和 调试 器 。 


2.1.1 菜单 栏 


菜单 栏 中 分 别 有 项 目 \ 文 件 、 编 辑 `. 工 具 、. 界 面 .设置 和 微 信 开发 者 工具 。 现 对 这 些 菜单 
做 简单 介绍 。 

(1) 项 目 。 

。 新 建 项 目 : 快速 新 建 项 目 ; 

。 打开 最 近 : 可 以 查看 最 近 打 开 的 项 目 列表 ,并 选择 是 否 进入 对 应 项 目 ; 
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小 本 模式 


Hello World 


pagesindexindex 所 出 打开 已 爱 值 。 RE# 数 


图 2.1 微 信 web 开发 者 工具 的 界面 


。 查看 所 有 项 目 : 新 窗口 打开 启动 页 的 项 目 列表 页 ; 

。 关闭 当前 项 目 : 关闭 当前 项 目 , 回 到 启动 页 的 项 目 列表 页 。 

(2) 文件 : 文件 的 新 建 , 保 存 和 关闭 操作 。 在 编辑 修改 一 个 文件 之 后 需 使 用 文件 菜单 
下 的 “保存 ”功能 来 保存 修改 。 

(3) 编辑 : 提供 代码 格式 上 的 操作 。 

(4) 工具 : 项 目的 刷新 、 编 译 和 预览 .前 后 台 切 换 、 数 据 缓 存 的 清理 和 项 目的 上 传 部 署 。 


(5) 界面 : 工具 栏 编辑 器 \ 模 拟 器 、 调 试 器 和 目录 树 的 显示 控制 。 
(6) 设置 。 


。 外 观 设置 : 控制 编辑 器 的 配色 主题 .字体 .字号 ,行距 ; 

。 编辑 设置 : 控制 文件 保存 的 行为 ,编辑 器 的 表现 ; 

。， 代 理 设置 : 选择 直 连 网 络 、 系 统 代理 和 手动 设置 代理 ; 

， 通 知 设置 : 设置 是 否 接 受 某 种 类 型 的 通知 。 

(7) 微 信 开发 者 工具 : 账户 的 切换 ,开发 者 工具 版 本 的 更 新 。 


2.1.2 工具 栏 


(1) 左 侧 区 域 : 包含 个 人 中 心 ,模拟 器 ,编辑 器 和 调 
试 器 等 ,如 图 2.2 所 示 。 多 国 


榜 拟 器 绽 辑 器 。 调试 器 。 云 开发 
具体 说 明 如 下 。 图 2.2 左 侧 工具 栏 
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*。 个 人 中 心 : 用 于 账户 切换 和 消息 提醒 。 


。 模拟 器 : 单 击 切换 显示 或 隐藏 模拟 器 的 面板 。 
。 编辑 器 : 单 击 切换 显示 或 隐藏 编辑 器 的 面板 。 
。 调试 器 : 单 击 切换 显示 或 隐藏 调试 器 的 面板 。 


(2) 中 间 区 域 : 包含 小 程序 模式 .普通 编译 、 编 译 、 预 览 真 机 调试 . 切 后 台 


图 2.3 所 示 。 


小 程序 模式 训 表 六 -Og® EE 
编译 ” 预 疙 。。 真 机油 坛 。 切 后 台 。 清 缓存 
图 2.3 中 间 工 具 栏 
具体 说 明 如 下 。 


(1) 小 程序 模式 : 小 程序 模式 和 搜索 动态 页 模式 。 
(2) 普通 编译 : 普通 模式 、 自 定义 编译 模式 和 二 维 码 编译 模式 。 


(3) 编译 : 重新 编译 小 程序 项 目 。 
(4) 预览 : 生成 二 维 码 进行 真 机 预览 。 


(5) 真 机 调试 : 生成 二 维 码 进行 真 机 远程 调试 。 


(6) 切 后 台 : 用 于 切换 场景 值 。 


(7) 清 缓存 : 单独 或 同时 清除 数据 缓存 ,文件 缓存 .授权 数据 网 络 缓存 ,登录 状态 。 


2.1.3 ”模拟 器 


模拟 器 用 于 在 计算 机 中 模拟 小 程序 在 手机 上 的 执行 效果 ,如 图 2.4 所 示 。 图 2.4 中 的 3 
张 图 分 别 为 选择 手机 型 号 、 选 择 显示 比例 和 选择 网 络 连接 状态 。 


viphone s G20 568 | Dpea) 
iphone 6 (375 #667 | Dpr) 


iphone 6 pus (4142736 | Dpr3) 
iphone 7 (3475x667 | Dpr2) 
iphone 7 phus (414x736 | Dpr3) 
iphoneX G75x81210pr3) 

iphone XR (14x896| DprD) 
iphone xs Max (414 x 896| Dpr3) 
Nems 5 (60x 640 | Dpr3) 

Nemus Sx (411 0731 | Dpr2625) 
Nems 6 (412x732| Dpr35) 

ipad Air 2 768x 1024 | Dpr) 

ipad pro 105-inch (a34 x 1112| Dpr2) 
ipad Pro 12.9 inch (1024 x 13661Dpr2 


Gd 


Hello World 


Hello World 


Hello World 


(a) 选择 手机 型 号 


(b) 选择 显示 比例 
图 2.4 模拟 器 的 相关 选项 


(c) 选择 网 络 连接 状态 


第 2 章 ”小 程序 开发 基础 0 2 


小 程序 的 代码 通过 编译 后 可 以 在 模拟 器 上 直接 运行 。 | + Q 
开发 者 可 以 选择 不 同 的 设备 ,也 可 以 添加 自 定义 设备 来 调 | v 刀 pages 
试 小 程序 在 不 同 尺寸 机 型 上 的 适 配 情况 。 en 


8 indexjs 


0 
宇 


{} indexjson 


2.1.4 目录 树 


wss index wxss 


， 器 ogs 


目录 树 如 图 2.5 所 示 , 在 目录 结构 区 中 单 击 左 上 角 的 “| ,ii 
“十 ”号 可 以 添加 新 文件 ,文件 类 型 包括 WXML、JS、WXSS 5 appjs 
和 JSON。 在 pages 文件 下 可 以 创建 新 的 文件 ,其 子 文件 夹 | 一 sen 


下 包含 同名 的 WXML、JS、WXSS 和 JSON 文件 。 关 于 微 | poeceonnojson 
信 小 程序 的 目录 结构 详 见 本 章 2.2 节 。 {} stemapjson 
图 2.5 目录 树 


2.1.5 代码 编辑 区 


在 代码 编辑 区 中 可 以 打开 多 个 页 面 切换 查看 , 单 击 代 码 右 上 角 的 “X” 号 可 以 关闭 当前 
的 代码 页 面 。 在 代码 编辑 区 域 , 小 程序 提供 自动 联想 功能 ,以 输入 一 个 < view > 标签 为 例 , 代 
码 联想 功能 如 图 2.6 所 示 。 


index wxml . 
1 <!--index.wxml--> 
2 
3 TagO 
4 
5 | 
6 
7 E| 
8 EE 
9 </block> 
19 </view> 
11 <view class="usermottoy 
12 <text class="user-motto">{f{fmottojj</text> 
13 </view> 
14 </view> 
15 


图 2.6 代码 联想 功能 


2.1.6 调试 器 


小 程序 调试 器 主要 包含 Console、 Sources、 Network、Security、 Storage、 AppData、 
WXML .Sensor 和 Trace 功能 模块 。 

1. Console 

Console 用 于 显示 开发 过 程 中 的 提示 信息 ,例如 当 小 程序 编译 或 运行 有 误 时 ,会 在 控制 
台 显 示 warning 和 error 等 信息 ,这 是 小 程序 调试 的 基础 功能 。 在 WXML 文件 中 输入 错误 
格式 代码 时 ,Console 提示 报错 信息 ,如 图 2.7 所 示 。 


所 示 。 
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民 Console Sources Network Securty AppData Audits 罗 914A1| ; 器 
四 @ top v| 四 Fer Default levels v Ee3 
Y Sat Aug 19 2619 11:33:38 GHT+68965K 让 有 周 等 准 村 记 )) sitemap 素 引 情况 提示 VM68:4 1 
| A ， 根据 sitemap 的 规则 [6]， 当 前 页 面 Tpages7index7index] 将 被 索引 VM55:1 
vv Sat Aug 19 2919 11:33:38 GMHT+8866 (中 国标 准时 间 ) WXML 文件 编译 错误 VMe9:1 

© »./pages/index/index.wxml VM55:1 


end tag missing, near “Vv 
1 | <!--index-wml--> 


>21<v> 
| ^ 
3 | <view class="container”> 
4 | <view class-"userinfoy 
51 <button wx:if-"{{!hasUserInfo &8 canIUse}}” open-type-"getUserInfo" "| 
a 


图 2.7 Console 控制 台 报错 信息 提示 


2. Sources 
Sources 面板 是 小 程序 的 资源 面板 ,用 于 显示 本 地 和 云端 的 相关 资源 文件 ,如 图 2.8 
RConsole Sources Network Securty AppData Audits Sensor Storage Trace Wxml a2 i 
Page Filesystem 为 i 四 appjsx [cL 
De ~ @ Pertyprmt ths mnited fie? more rever show x |» Waleh -| 
"CToo1a8949 @ Source Map deteced more never show * | wCall Stack 
ee 3 borineC so.", editor won exports, windw, dormont, rons el, lccio Not paused 
» us 3 //epp.js 
ed He foneton ontaunen0) { 四 
oppjs? om “75 
,mM {} une covmn 1 | 
a 
图 2.8 ”Sources 面板 
3. Network 
Network 用 于 观察 和 显示 网 络 请 求 和 响应 的 情况 ,如 图 2.9 所 示 。 
Console Sources Network Securty AppData Audits Sensor Storage Trace Wxml a2 3 曙 
OO mF A Vw Ta Goupbytme | BPresevelog 目 Deablecache| 占 Ofine onine * 
tiae daa urts @ cam Wm 上 css mo Media Font Doc WS Manitest Other 
om im am om am mm aa om mm " 
Sa pe aaor See Time Watertan a 
200 jpeg Other from cisk Cac Sms EE 
2 seqvests 1 0 vanstered 1 42 KB resources 


图 2.9 Network 面板 


4. Security 
Security 面板 是 小 程序 的 安全 面板 ,用 于 检测 当 发 生 网 络 请 求 时 ,记录 所 使 用 的 域名 来 


源 是 否 安全 ,如 图 2.10 所 示 。 


S. Storage 
Storage 面板 用 于 显示 当前 小 程序 的 缓存 数据 ,如 图 2.11 所 示 。 
6. AppData 


AppData 面板 用 于 实时 查看 小 程序 页 面 JS 文件 中 data 数据 的 变化 ,允许 开发 者 修改 


数据 ,修改 后 的 效果 会 实时 地 在 模拟 器 上 发 生变 化 ,如 图 2.12 所 示 。 
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| Console Sources Network Securty AppData Audits Sensor Storage Trace Wxml 
Security overview 
Verview 
Main origin 
Reload to view details The security of this page is unknown. 
图 2.10 ”Security 面板 
[ey Console Sources Network Securty AppData Audits Sensor Storage Trace Wxml 
© Fer Current Size: 33.00B 
Key Value 
logs + Array (2): [1565408143940,15654861618374] 
图 2.11 Storage 面板 
民 | Console Sources Network Securty AppData Audits Sensor Storage Trace Wxml 


v pages/index/index {5} 


motto : Hello World 


pb userInfo {7} 
hasUserInfo : 国 true 
canIUse : 图 true 


_ webviewId :2 


图 2.12 AppData 面板 


7. WXML 
WXML 面板 提供 开发 者 查看 当前 页 面 的 WXML 代码 以 及 对 应 的 泻 染 样式 ,此 功能 方 
便 开发 者 查看 页 面 的 结构 与 对 应 的 样式 ,如 图 2.13 所 示 。 


民 


Console Sources Network Security AppData Audits Sensor Storage Trace Wml 


+ cpage Syes Dalaset ScopeDala 
Vview class-"container- 
Veview class=ruserinfory 


image bindtap-"bindViewTap de 
327 StezpvnoayG5wFKUf1S1afa7aV6njjs4bsEvkx2368XYIboG2TidCqYfSRuny166yhpngeu1f33iVINgxse0A7332 


aement-sole { 


Class- “Userinfo- avatar’ sre~https://wx. qlogo. cn/meopen/vi 


role .userinfo { pege3/1ndex/Andex, ws32 | 
ee display: flex; 
etext class-rusernfo-ntcknamery cjtexty 
viem Flex-direction: column; 
Deview class-"usenmotto™ </Viewy align-ttens: center; 
/vie } 
i view { sser ogent styLesheet 


8. Sensor 


Sensor 面板 有 两 大 功能 。 


图 2.13 WXML 面板 
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(1) 为 开发 者 提供 选择 模拟 地 理 位 置 的 功能 ,如 图 2.14 所 示 。 


民 | Console ”Sources 


Geolocation ” 园 enable 
39.92 


116.46 
-1 
65 


0 


Network Security AppData ”Audits 


Latitude 
Longitude 
Speed 
Accuracy 


Altitude 


Sensor Storage Trace 。 Woxml 


图 2.14 模拟 地 理 位 置 功能 


(2) 开发 者 可 以 模拟 移动 设备 表现 ,用 于 调试 重力 感应 API, 如 图 2.15 所 示 。 


[ey Console 。 Sources 


Orientation 0 


Network Securty AppData Audits 


Sensor Storage Trace 。 Wxml 


2.2 小 程序 项 


图 2.15 ”调试 重力 感应 API 


目 结构 


小 程序 项 目 结构 有 自己 的 特点 ， 


2.2.1 项 目 文件 


结构 


当 开 发 者 新 建 一 个 工程 ,如 图 2.16 所 示 , 项 目 文 
件 包 括 根 目录 下 的 pages 文件 夹 和 utils 文件 夹 ,以 及 


全 局 文件 app.js、app.json、 


.json 和 sitemap.json。 


app. wxss, project. config 


全 局 文件 是 对 整个 小 程序 的 全 局 属性 的 定义 ,其 


设置 的 属性 优先 级 低 于 页 面 


属性 的 优先 级 , 即 如 果 一 


个 页 面 的 某 一 属性 在 全 部 文件 和 页 面 文件 中 同时 被 

设置 的 时 候 , 页 面 属性 设置 将 覆盖 全 局 属性 设置 。 
pages 文件 夹 是 页 面 文件 的 所 在 ,小 程序 中 的 一 

个 页 面 对 应 一 个 文件 夹 .图 2.17 中 pages 文件 夹 下 有 
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项 目 结构 分 为 全 局 文件 和 页 面 文件 两 部 分 。 


me 


v DD pages 
» index 
*， 四 logs 
vO uls 
IS appjs 
{) appjson 
ws app wss 
{s} project.configjson 
{] sitemapjson 


图 2.16 项 目 文件 结构 
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index 和 logs 两 个 文件 夹 即 对 应 两 个 页 面 。 


utils 文 件 夹 下 存放 着 utils js 文件 ,是 工具 类 | 一 一 三 一 
v DD pages 
文件 。 i 
S indexjs 


2.2.2 页面 文件 ee 


mms index.Wxss 


一 个 完整 的 小 程序 页 面 由 四 部 分 组 成 ， » Dogs 
。 WXML 文件 : 用 于 构建 页 面 的 结构 ; aaa 
。WXSS 文件 : 用 于 设置 页 面 的 样式 ,该 文件 定 图 2.17 页 面 文件 组 成 
义 的 样式 会 覆盖 app.wxss 全 局 样式 表 中 系统 
自 定义 的 样式 ; 


JS 文件 : 用 于 设置 当前 页 面 的 逻辑 代码 和 用 户 交 互 ; 
JSON 文件 : 用 于 重新 设置 app.json 中 window 自 定义 的 内 容 , 新 设置 的 选项 只 会 
显示 在 当前 页 面 上 ,不 会 影响 其 他 页 面 。 

如 图 2.17 所 示 是 index 页 面 对 应 的 index.js、index.json、index.wxml 和 index.wxss 4 
个 文件 。 其 中 WXML 和 JS 文件 是 必 不 可 少 的 ,在 不 对 页 面 文件 进行 相应 设置 或 者 不 覆盖 
全 局 JSON 和 全 局 WXSS 文件 的 时 候 , 页 面 的 JSON 和 WXSS 文件 可 以 没有 。 

当 开 发 者 新 建 一 个 小 程序 页 面 的 时 候 , 需 要 在 全 局 文件 app.js 中 注册 ,否则 该 页 面 将 不 
能 在 项 目 中 被 执行 。 图 2.18 是 index 和 logs 两 个 页 面 在 全 局 文件 app.js 中 注册 的 代码 , 需 
写 在 app.js 的 pages 属性 中 。 


+ Q » 二 有 appjson . 
| 
“DD pages 2 "pages-: 
» DD index 3 pages/index/index™, 
» [I logs 4 pages/logs/logs" 
5 J» 
(2 utils 
口 6 “window": { 
JS appjs 7 “backgroundTextStyle™: “light”, 
{) appjson 8 ”navigationBarBackgroundColor" : “#fff", 
9 ”navigationBarTitleText": “WeChat”™, 
ws app wxss 
19 “navigationBarTextStyle™: “black” 
{0} project config json 11 也 
{} sitemap json 12 "sitemapLocation": "sitemap.json" 
3 } 


图 2.18 页 面 的 注册 


2.2.3 全 局 配置 文件 


全 局 配置 文件 包括 app.js、app.json、app. wxss、 project. config.json 和 sitemap. json 
5 个 文件 。 其 中 前 三 个 文件 经 常 需要 进行 修改 操作 ,而 后 两 个 文件 则 很 少 修改 。 

。 app.js: 必 填 文件 ,用 于 描述 小 程序 的 整体 逻辑 ; 

。 app.json: 必 填 文件 ,用 于 描述 小 程序 的 整体 逻辑 结构 ; 

。 app.wxss: 可 选 文件 ,用 于 定义 小 程序 的 公共 样式 表 ; 
project.config.json: 开发 者 工具 上 做 的 任何 配置 都 会 写 入 这 个 文件 , 当 重 新 安装 工 
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具 或 者 换 计算 机 工作 时 ,只 要 载 人 同一 个 项 目的 代码 包 , 开 发 者 工具 就 会 自动 恢复 
到 当时 开发 项 目 时 的 个 性 化 配置 ,其 中 会 包括 编辑 器 的 颜色 .代码 上 传 时 自动 压缩 
等 一 系列 选项 ; 

。 sitemap.json: 用 于 配置 小 程序 及 其 页 面 是 否 允 许 被 微 信 索引 ,文件 内 容 为 一 个 
JSON 对 象 , 如 果 没 有 sitemap.json, 则 默认 为 所 有 页 面 都 允许 被 索引 。 

1. app.json 

app.json 文件 是 小 程序 中 的 全 局 配置 文件 , 它 决 定 页 面 的 路 径 、 窗 口 样式 .tabBar 样式 、 

设置 网 络 超时 时 间 等 。 示 例 代码 如 下 : 


{ 

"pages": [ 
"pages/index/index", 
"pages/1ogs/logs" 

]， 

"window": { 
"backgroundTextStyle" : "light", 
"navigationBarBackgroundColor": "#fff", 
"navigationBarTitleText": "WeChat", 
"navigationBarTextStyle" : "black" 

}, 

"sitemapLocation": "sitemap. json" 


} 
根据 需要 ,app.json 文件 可 以 对 17 个 属性 进行 设置 ,其 属性 如 表 2.1 所 示 。 
表 2.1 全 局 配置 文件 app.json 属性 


属 性 类 型 必 填 描 述 
pages string Array 是 | 设置 页 面 路 径 
window Object 否 全 局 的 默认 窗口 表现 
tabBar Object 否 底部 tab 栏 的 表现 
networkTimeout Object 否 网 络 超时 
debug boolean 否 是 否 开 启 debug 模式 ,默认 关闭 
functionalPages boolean 否 是 否 启用 插件 功能 页 ,默认 关闭 
subpackages Object[] 否 分 包 结构 配置 
workers string 否 Worker 代码 放置 的 目录 
requiredBackgroundModes string[ ] 否 需要 在 后 台 使 用 的 能 力 , 如 [音乐 播放 J」 
plugins Object 否 使 用 到 的 插件 
preloadRule Object 否 分 包 预 下 载 规则 
resizable boolean 否 | iPad 小 程序 是 否 支持 屏幕 旋转 ,默认 关闭 
navigateToMiniProgram AppldList string[ ] 否 和 是 w 让 

wx.navigateToMiniProgram 

usingComponents Object 否 | 全 局 自 定义 组 件 配 置 
permission Object 否 | 小 程序 接口 权限 相关 设置 
sitemapLocation String 是 | 指明 sitemap.json 的 位 置 
style String 否 指定 使 用 升级 后 的 weui 样式 
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下 面 对 核心 属性 进行 说 明 如 下 。 

(1) pages 属性 。 

pages 为 一 个 数组 ,每 一 项 用 字符 串 表示 ,字符 串 的 格式 为 “路 径 十 文件 名 ”, 元 素 的 个 
数 为 项 目 中 页 面 的 个 数 ,第 一 项 代表 小 程序 的 初始 页 面 , 即 在 编译 后 最 先 出 现在 模拟 器 中 的 
页 面 ,或 者 说 是 项 目的 首页 ,开发 者 可 以 通过 调整 页 面 在 pages 属性 中 的 位 置 来 查看 不 同 页 
面 在 模拟 器 中 的 预览 效果 。 当 小 程序 中 新 增 或 减少 页 面 时 ,都 需要 对 pages 属性 进行 修改 。 

(2) windows 属性 。 

windows 属性 用 于 设置 小 程序 的 导航 条 标题 窗口 背景 色 等 ,其 属性 值 如 表 2.2 所 示 。 


表 2.2 app.json 文件 中 的 windows 属性 值 


属 性 类 型 | 默认 值 描 述 
navigationBarBackgroundColor | HexColor | #000000 | 导航 栏 背景 颜色 ,如 #000000 
navigationBarTextStyle String white 导航 栏 标题 颜色 , 仅 支持 black/white 
navigationBarTitleText String 设置 导航 栏 标题 文字 内 容 

导航 栏 样式 , 仅 支 持 以 下 值 : default 默认 样 
navigationStyle string default 式 ,custom 自 定义 导航 栏 , 只 保留 右上 和 角 胶 讲 
按钮 
backgroundColor HexColor | 井 ffffff 窗口 的 背景 色 
backgroundTextStyle string dark 下 拉 loading 的 样式 , 仅 支 持 dark/light 
backgroundColorTop string # {fffff 顶部 窗口 的 背景 色 , 仅 iOS 支持 
backgroundColorBottom string # {fff{ff 底部 窗口 的 背景 色 , 仅 iOS 支持 
enablePullDownRefresh boolean false 是 否 开启 当前 页 面 的 下 拉 刷 新 
页 面 上 拉 触 底 事件 触发 时 距 页 面 底部 的 距 
onReachBottomDistance number 50 
离 , 单 位 : px 


[ 贺 2-1 小 程序 windows 属性 设置 案例 ,运行 效果 如 图 2.19 所 示 。 


e000e WeChats 21:04 


视频 讲解 


设置 windows 属 性 


不 会 游泳 的 鱼 


图 2.19 设置 windows 属性 后 的 预览 图 


app.json 文件 代码 如 下 : 


{ 
"pages": [ 
"pages/index/ index", 
"pages/logs/logs" 
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]， 

"window" : { 
"backgroundTextStyle" : "light", 
"navigationBarBackgroundColor" : " #004A80", 
"navigationBarTitleText" : "设置 windows 属性 "， 
"navigationBarTextStyle" : "white" 

}, 

"sitemapLocation" | 


| 
【代码 讲解 】 本 例 在 app.json 中 通过 pages/index/index 语句 ,在 pages 属性 中 注册 
index 页 面 。 
。“"navigationBarBackgroundColor":" # 004A80"” 用 于 设置 导航 栏 背 景 颜色 为 “天 蓝 
色 ”。 
。“"navigationBarTitleText" : "设置 windows 属性 "” 用 于 设置 导航 栏 标 题 。 


。“"navigationBarTextStyle" : "white"” 用 于 设置 导航 栏 标题 文字 为 白色 。 
(3) tabBar 属性 。 


tabBar 属性 用 于 设置 tab 栏 包含 的 页 面 及 显示 样式 ,其 配置 属性 值 如 表 2.3 所 示 。 
表 2.3 app.json 文件 中 的 tabBar 属性 值 


Sitemap. json” 


属 性 类 型 默认 值 描 述 
color HexColor tab 上 的 文字 默认 颜色 , 仅 支持 十 六 进 制 颜色 
selectedColor HexColor white tab 上 的 文字 选中 时 的 颜色 , 仅 支 持 十 六 进 制 颜色 
backgroundColor HexColor tab 的 背景 色 , 仅 支持 十 六 进 制 颜色 
borderStyle String black tabBar 上 边框 的 颜色 , 仅 支持 black/ white 
list Array tab 的 列表 , 详 见 表 2.4 list 属性 
position string bottom tabBar 的 位 置 . 仅 支持 bottom/top 


list 接收 一 个 数组 ,配置 最 少 为 2 个 ,最 多 为 5 个 , 按 数组 的 顺序 排序 ,每 项 都 可 以 通过 
设置 其 属性 而 改变 其 样式 ,其 属性 值 如 表 2.4 所 示 。 


表 2.4 list 属性 值 


属 性 类 型 必 填 描 述 
pagePath String 是 页 面 路 径 ,必须 在 pages 中 先 定义 
text String 是 tab 上 按钮 文字 


未 选中 时 的 图 片 路 径 ,icon 大 小 限制 为 40KB, 建 议 尺寸 为 81px 
X81px, 不 支持 网 络 图 片 。 当 position 为 top 时 ,不 显示 icon 
选中 时 的 图 片 路 径 ,icon 大 小 限制 为 40KB, 建 议 尺寸 为 81pxX 
81px, 不 支持 网 络 图 片 。 当 position 为 top 时 ,不 显示 icon 


iconPath string 


selectedIconPath string 否 


当 开 发 者 需要 自 定义 一 个 tabBar 时 ,可 以 在 text 属性 中 设置 标题 ,在 iconPath 中 设置 
未 选中 时 图 片 的 来 源 路 径 , 在 selectedIconPath 中 设置 选中 图 标 后 图 标的 来 源 路 径 ,在 
pagePath 中 设置 选中 图 标 时 对 应 的 页 面 路 径 。 当 position 属性 值 为 top 时 ,tabBar 会 在 页 
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面 顶端 ,iconPath 和 selectedlconPath 属性 无 效 , 不 显示 图 标 。 
圆 ?-2 设置 tabBar 属性 小 案例 ,程序 运行 效果 如 图 2.20 所 示 。 


视频 讲解 


Hello World 


88 


首页 的 


图 2.20 ”tabBar 效果 
app.json 文件 代码 如 下 : 
{ 


"pages": [ 
"pages/index/index", 
"pages/1o0gs/1lo0gs" 

]， 

"window": { 
"backgroundTextStyle" : "light", 
"navigationBarBackgroundColor": "#fff", 
"navigationBarTitleText": "WeChat", 
"navigationBarTextStyle" : "black" 

}, 


"tabBar": { 
"backgroundColor": "#ffffff", 
"selectedColor": "#E4393C", 
ae 
{ 


"pagePath" : "pages/index/index", 
"selectedIconPath" : "images/iconl - live. png", 
"iconPath" : "images/icon1. png", 

"text" : 
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"pagePath" : "pages/logs/logs", 
"selectedIconPath" : "images/icon2 - live. png", 
"iconPath" : "images/icon2.png"， 
"text": "我 的 " 
} 
] 
}, 
oO 


} 

【代码 讲解 】 本 例 在 list 中 配置 两 个 tabBar, 分 别 为 其 设置 未 选择 的 图 标 、 选 择 后 的 图 
标 和 字体 的 颜色 3 个 属性 ,“ 首 页 ”对 应 的 页 面 路 径 为 index 页 面 ,“ 我 的 "对 应 的 页 面 路 径 为 
logs 页 面 。 

(4) networkTimeout 属性 。 

networkTimeout 属性 用 于 设置 各 类 网 络 请 求 的 超时 时 间 , 单 位 均 为 毫秒 (ms) ,默认 没 
有 配置 ,开发 者 可 以 在 app.json 文件 中 自行 增加 ,其 属性 值 如 表 2.5 所 示 。 

表 2.5 app.json 文件 中 的 networkTimeout 属性 值 


局 性 类 型 默认 值 说 明 
request number 60000 wx.request 的 超时 时 间 ,单位 : ms 
connectSocket number 60000 wx.connectSocket 的 超时 时 间 ,单位 : ms 
uploadFile number 60000 wx.uploadFile 的 超时 时 间 ,单位 : ms 
downloadFile number 60000 wx.downloadFile 的 超时 时 间 ,单位 : ms 
示例 代码 如 下 : 


{ 
"networkTimeout": { 
"downloadFile ": 3000 
} 
} 


上 述 代 码 中 ,设置 下 载 文 件 wx.downloadFile() 方 法 的 超时 时 间 为 3s。 

(5) debug 属性 。 

用 户 可 以 在 开发 者 工具 中 开启 debug 模式 ,在 开发 者 工具 的 控制 台面 板 , 调 试 信息 以 
info 的 形式 给 出 ,其 信息 有 页 面 的 注册 、 页 面 路 由 、 数 据 更 新 和 事件 触发 等 ,可 以 帮助 开发 者 
快速 定位 一 些 常 见 的 问题 。 
3 回 2. app.js 
app.js 文件 是 小 程序 的 全 局 逻辑 文件 ,其 生命 周期 函数 详 见 2.3.1 节 。 
app.js 文件 最 常用 的 功能 就 是 定义 全 局 数据 和 全 局 函数 。 

[ 贺 ?-3 本 案例 在 全 局 文件 app.js 中 定义 变量 和 函数 ,index.js 引用 
app.js 中 定义 的 变量 和 函数 。 程 序 运行 效 果 如 图 2.21 所 示 。 
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e000 WeChats 9-48 100% ml 
WeChat LO) 
5+5 结 果 是 10 


图 2.21 app.js 向 index.js 传递 数据 


app.js 文件 代码 如 下 : 


App({ 
globalData: { 
Info: "加 法 " 


}, 
add: function(a, b){ 
returnat+b 
} 
}) 


pages/index/index.wxml 文件 代码 如 下 : 


< View class = "usermotto"> 
< text class = "user - motto">{ {a}} + {{b}}{{Info}} 结 果 是 {{c}}</text > 
</view> 


pages/index/index.js 文件 代码 如 下 : 


const app = getApp() 
Page({ 

data: { 

a:5, 

b:5, 

c:0, 

To 
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}, 
onLoad: function() { 
var c= app.add(this. data. a, this. data. b) 
var Info= app. Info 
this. setData({ 
Cie 
Info: Info 
}) 
} 
}) 


【代码 讲解 】 本 例 中 的 index.js 引用 了 app.js 中 的 


app. Wxss x 


变量 Info 和 函数 add, 在 index.js 中 声明 const app 一 1 erapp.wxss**/ 
getApp() 语 句 之 后 ,app 对 象 即 包 含 了 app.js 中 所 有 Ts 
的 变量 和 函数 ,而 后 app.Info 和 app.add() 即 可 引用 到 py 


flex-direction: column; 


app.js 中 的 变量 Info 和 函数 add。 pen 
3. app.wxss padding: 296rpx 0; 
app.wxss 文件 是 小 程序 的 全 局 样式 文件 ,代码 如 ey 

图 2.22 所 示 。 
app.wxss 文件 用 于 规定 项 目 中 所 有 页 面 的 公共 图 2.22 app.wxss 文件 的 代码 

样式 ,关于 样式 的 定义 详 见 第 4 章 样 式 与 布局 。 


2.3 生命 周期 函数 


小 程序 的 生命 周期 分 为 两 类 : 小 程序 应 用 级 生命 周期 和 页 面 级 生命 周期 。 
当 打 开 小 程 序 时 ,首先 会 触发 应 用 级 生命 周期 函数 onLaunch() 进 行程 序 的 启动 ,完成 
后 调用 onShow() 准 备 显示 页 面 , 当 被 切换 进入 后 台 会 调用 onHide() ,直到 下 次 程序 在 销毁 
前 重新 被 唤起 会 再 次 调用 onShow() 。 
当 小 程序 应 用 级 生命 周期 调用 完 onShow() 以 后 esi 
期 ,在 一 个 页 面 加 载 显示 的 过 程 中 会 分 别 触 发 onLoad() ,onShow() .onReady() 函 数 。 
面 被 切换 到 后 台 ,会 调用 页 面 onHide() ,从 后 台 被 唤醒 会 调用 页 面 onShow()。 直 到 页 Nit 
闭会 调用 onUnload(), 当 用 户 重 新 打开 页 面 还 会 再 依次 触发 onLoad()、onShow()、 
onReady() 函 数 。 
在 tab 栏 上 页 面 之 间 互 相 切换 以 及 在 当前 页 面 上 跳 转 到 一 个 新 页 面 也 会 触发 onHide() 
函数 , 当 用 户 再 次 切换 到 之 前 的 页 面 会 调用 onShow() 函 数 。 


2.3.1 应 用 级 生命 周期 


小 程序 的 应 用 级 注册 是 通过 重 写 App() 函数 的 各 种 回调 事件 来 达到 影响 整个 应 用 行 
为 的 目的 ,App() 函 数 必须 在 app.js 中 注册 ,并 且 有 且 仅 有 一 个 , 它 接受 一 个 object 参数 , 指 
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定 小 程序 的 生命 周期 。object 参数 属性 如 表 2.6 所 示 。 
表 2.6 object 参数 属性 


属 性 类 型 必 填 说 明 
onLaunch function 否 生命 周期 回调 一 一 监听 小 程序 初始 化 
onShow function 否 生命 周期 回调 一 一 监听 小 程序 启动 或 切 前 台 
onHide function 否 生命 周期 回调 一 一 监听 小 程序 切 后 台 
onError function 否 错误 监听 函数 
onPageNotFound function 否 页 面 不 存在 监听 函数 
其 他 a 否 开发 者 可 以 添加 任意 函数 或 数据 变量 到 Object 参数 中 ， 
用 this 可 以 访问 


前 台 和 后 台 : 当 用 户 单 击 左 上 角 的 “关闭 ”按钮 时 ,或 者 设备 中 的 界面 离开 微 信 , 这 时 小 
程序 进入 后 台 , 而 并 没有 销毁 ; 当 小 程序 再 次 切换 到 当前 屏幕 时 ,小 程序 又 会 从 后 台 进 入 前 
台 , 只 有 当 小 程序 进入 后 台 一 定时 间 后 ,或 者 系统 资源 占用 过 高 ,小 程序 才 会 被 销毁 。 

微 信 小 程序 提供 了 全 局 的 getApp() 函 数 ,可 以 获取 小 程序 实例 ,在 定义 了 App 的 函数 
后 ,this 即 可 获得 实例 。onLaunch() 和 onShow() 方 法 返回 的 参数 如 表 2.7 所 示 。 


表 2.7 onLaunch() 和 onShow() 方 法 返回 的 参数 


属 性 类 型 必 填 
path string 启动 小 程序 的 路 径 
Scene number 启动 小 程序 的 场景 值 
query Object 启动 小 程序 的 query 参数 
shareTicket ti 小 程序 被 转发 时 会 生成 一 个 shareTicket, 打 开 被 转发 的 小 程序 页 
面 可 以 获取 该 参数 
来 源 信息 , 当 从 另 一 个 小 程序 ,公众 号 或 App 进入 小 程序 时 返回 ， 
referrerInfo String 
否则 返回 {} 
referrerInfo.appId string 来 源 小 程序 .公众 号 或 App 的 AppID 
referrerInfo.extraData | Object “| 来 源 小 程序 传 过 来 的 数据 , 当 scene 二 1037 或 1038 时 才 支 持 


返回 有 效 referrerInfo 的 场景 值 如 表 2.8 所 示 。 
表 2.8 返回 referrerInfo 的 场景 值 


场 景 值 场 景 AppID 含义 
1020 公众 号 profile 页 相关 小 程序 列表 来 源 公众 号 
1035 公众 号 自 定义 菜单 来 源 公众 号 
1036 App 分 享 消息 卡片 来 源 App 
1037 小 程序 打开 小 程序 来 源 小 程序 
1038 从 另 一 个 小 程序 返回 来 源 小 程序 
1043 公众 号 模板 消息 来 源 公众 号 


部 分 版 本 在 无 referrerInfo 的 时 候 会 返回 undefined, 建 议 使 用 options. referrerInfo &&. 
options.referrerInfo.appId 进行 判断 。 
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2.3.2 ”页面 级 生命 周期 


注册 小 程序 中 的 一 个 页 面 ,可 以 在 JS 文件 中 使 用 Page(Object) 方 法 进行 注册 ,接受 一 
个 Object 类 型 参数 后 ,就 能 够 指定 页 面 的 初始 数据 .生命 周期 回调 .事件 处 理 函 数 等 。 页 面 
级 生命 周期 函数 和 应 用 级 生命 周期 函数 类 似 , 读 者 可 以 参考 表 2.6。 
在 Page() 方 法 中 默认 生成 的 onLoad()、onShow()、onReady()、onHide() 以 及 
onUnload() 均 是 页 面 的 生命 周期 回调 函数 ,具体 说 明 如 下 。 
。 onLoad(Object query) : 页 面 加 载 时 触发 。 一 个 页 面 只 会 调用 一 次 ,可 以 在 onLoad 
的 参数 中 获取 打开 当前 页 面 路 径 的 参数 。 
。 onShow(): 页 面 显 示 或 切入 前 台 时 触发 。 
。 onReady(): 页 面 初次 泻 染 完 成 时 触发 。 一 个 页 面 只 会 调用 一 次 ,代表 页 面 已 经 准 
备 完毕 ,可 以 和 视图 层 进行 交互 。 
。 onHide() : 页 面 隐藏 或 切入 后 台 时 触发 。 如 调用 wx.navigateTo() 或 底部 Tab 切换 
到 其 他 页 面 ,使 小 程序 切入 后 台 时 。 
onUnload(): 页 面 印 载 时 触发 。 如 调用 wx.redirectTo() 或 wx.navigateBack() 到 其 
他 页 面 时 。 
开发 者 可 以 根据 实际 情况 ,删除 不 需要 的 函数 或 者 保留 该 函数 内 部 空白 。 现 介绍 JS 文 
ss 回 “ 件 中 的 代码 。 
[ 圆 ?-4 本 例 通过 app.js 和 index.js 两 个 JS 文件 ,来 验证 应 用 级 生命 
周期 函数 和 页 面 级 生命 周期 函数 的 执行 过 程 。 项 目 启动 时 ,生命 级 周期 也 
数 执行 过 程 如 图 2.23 所 示 ; 项 目 切 换 到 后 台 时 ,生命 级 周期 函数 执行 过 程 


视频 讲解 如 图 2.24 所 示 。 


i 民 | Console Sources Network Security 
四 @ top v|I® | Fiher 四 9 ep El Fier 

app 执 行 onLaunch Wed Jul 31 2619 23:49:17 GMT+68886 (中 国标 潭 

app 执 行 onShow 入 根据 sitemap 的 规则 [9]， 当 前 页 面 [pages| 
vv Wed Jul 31 2919 23:46:17 GNMT+6866 (中 国标 page 执 行 onLoad 函 数 

入 ， 根据 sitemap 的 规则 [9]， 当 前 页 面 [pages/ page 执 行 onshow 函 数 

page 执 行 onLoad 国 数 page 执 行 onReady 函 数 

page 执 行 onshow 函 数 page 执 行 onHide 函 数 

page 执 行 onReady 函 数 app 执 行 onHide 


图 2.23 项 目 启动 时 生命 级 周期 函数 的 执行 过 程 ” 图 2.24 项 目 切换 到 后 台 时 生命 级 周期 函数 的 执行 过 程 


app.js 文件 代码 如 下 : 


Rpp({ 
Vi 
x 当 小 程序 初始 化 完成 时 ,会 触发 onLaunch( 全 局 只 触发 一 次 ) 
国 
* 
onLaunch: function() { 
console. log("app 执行 onLaunch") 
}, 
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/ xx 
x* 当 小 程序 启动 ,或 从 后 台 进入 前 台 显示 ,会 触发 onShow 
x 

ff 


onShow: function(options) { 
console. log("app 执行 onShow") 
}, 


7 
* 当 小 程序 从 前 台 进 入 后 台 , 会 触发 onHide 
*/ 


onHide: function() { 
console. log("app 执行 onHide") 
}, 
大 
* 当 小 程序 发 生 脚本 错误 ,或 者 API 调用 失败 时 ,会 触发 onError 并 带 上 错误 信息 
关 
下 
onError: function(msg) { 
console. log("app 执行 onError") 
} 
}) 


pages/index/index.js 文件 代码 如 下 : 


var app = getApp(); 
Page({ 
data: { 
motto: 'Hello World', 
userInfo: {}, 
hasUserInfo: false, 
canIUse: wx. canIUse( 'button. open - type. getUserInfo') 
}, 
onLoad: function(options) { 
console. log( "page 执行 onLoad 函数 ") 
}, 
/ xx 
* 生命 周期 函数 一 一 监听 页 面 初次 泻 染 完成 
x*/ 
onReady: function() { 
console. log("page 执行 onReady 函数 ") 
}, 
/ xx 
* 生命 周期 函数 一 一 监听 页 面 显示 
*/ 
onShow: function() { 
console. log("page 执行 onShow 函数 ") 
}, 
/xx 
* 生命 周期 函数 一 一 监听 页 面 隐藏 
x*/ 
onHide: function() { 
console. log("page 执行 onHide 函数 ") 
} 
}) 
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【代码 讲解 】 项 目 启 动 时 先 执行 应 用 级 生命 周期 函数 ,再 执行 页 面 级 生命 周期 函数 。 
项 目 切换 到 后 台 的 时 候 , 先 执行 页 面 级 生命 周期 函数 ,再 执行 应 用 级 生命 周期 函数 。 


2.4 ”人 逻辑 层 


逻辑 层 是 事务 逻辑 处 理 的 地 方 。 对 于 小 程序 而 言 , 逻 辑 层 就 是 .js 脚本 文件 的 集合 。 逻 
辑 层 对 数据 进行 处 理 后 发 送 给 视图 层 ,同时 接收 视图 层 的 事件 反馈 。 

微 信 小 程序 开发 框架 的 逻辑 层 是 由 JavaScript 编写 的 。 在 JavaScript 的 基础 上 , 微 信 
团队 做 了 一 些 适当 的 修改 ,以 便 提高 小 程序 的 开发 效率 。 主 要 修改 包括 : 

(1) 增加 App 和 page 函数 ,进行 程序 和 页 面 的 注册 。 

(2) 提供 丰富 的 API, 如 扫 一 扫 、 支 付 等 微 信 特有 的 功能 。 

(3) 每 个 页 面 有 独立 的 作用 域 ,并 提供 模块 化 功能 。 

逻辑 层 的 实现 就 是 编写 各 个 页 面 的 .js 脚本 文件 。 但 由 于 小 程序 并 非 运 行 在 浏览 器 中 ， 
所 以 JavaScript 在 Web 中 的 一 些 功能 无 法 使 用 ,如 document、window 等 。 

小 程序 开发 编写 的 所 有 代码 最 终 会 打包 成 一 份 JavaScript, 并 在 小 程序 启动 的 时 候 运 
行 , 直 到 小 程序 销毁 。 


2.4.1 页 面 数据 


1. 页 面 数 据 的 定义 

页 面 JS 文 件 page 函数 中 第 一 项 为 data 属性 ,在 data 中 定义 本 页 面 逻 辑 处 理 需 要 用 到 
的 数据 ,其 中 很 大 一 部 分 数据 将 用 于 WXML 文件 的 数据 泻 染 。 因 为 小 程序 JS 文件 是 基于 
JavaScript 编写 的 ,所 以 在 JS 文件 中 可 以 定义 字符 串 数字 布尔 值 . 对 象 和 数组 等 类 型 的 
数据 。 

示例 代码 : 


Page({ 
data:{ 
msg01:"Hello", 
msg02:2019 
} 
}) 


2. 使 用 setData() 修 改 数据 取 值 

除了 使 用 数据 的 初始 化 ,还 可 以 使 用 page 原型 实例 的 setData() 函数 修改 数据 的 取 值 ， 
这 种 方法 能 够 将 相关 数据 异步 更 新 到 WXML 页 面 上 。setData() 函数 用 于 将 数据 从 逮 辑 层 
发 送 到 视图 层 ( 异 步 ) ,同时 改变 对 应 的 this.data 的 值 (同步 )。Object 以 key: value 的 形式 
表示 ,将 this.data 中 的 key 对 应 的 值 改 变 成 value。 其 参数 说 明 如 表 2.9 所 示 。 
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表 2.9 setData() 参 数 


属 性 类 型 说 明 
data object 这 次 要 改变 的 数据 
callback function setData 引起 的 界面 更 新 浑 染 完毕 后 的 回调 函数 
示例 代码 : 
Page({ 
data: { 


date: "2019 -7 一 15" 
}, 
changeData: function() { 

this. setData({ 

date: "2019 -8 一 15" 
}) 
} 
}) 


setData() 函数 修改 数据 的 取 值 经 常用 于 WXML 文件 数据 绑 定 和 用 户 的 交互 场景 。 


2.4.2 页 面 事件 处 理 函 数 


在 page() 函数 中 默认 产生 一 系列 页 面 事件 处 理 函数 ,用 于 响应 用 户 对 页 面 执 行 某 一 动 
作 而 执行 的 处 理 。 函 数 的 说 明 如 下 。 


onPullDownRefresh() : 监听 用 户 下 拉 刷 新 事件 。 需 要 在 app.json 的 window 选项 中 或 
页 面 配 置 中 开启 enablePullDownRefresh。 可 以 通过 wx.startPullDownRefresh() 触 发 
下 拉 刷 新 ,调用 后 触发 下 拉 刷 新 动画 ,效果 与 用 户 手 动 下 拉 刷 新 一 致 。 当 处 理 完 数 
据 刷 新 后 ,wx.stopPullDownRefresh() 可 以 停止 当前 页 面 的 下 拉 刷 新 。 
onReachBottom() : 监听 用 户 上 拉 触 底 事件 。 可 以 在 app.json 的 window 选项 中 或 
页 面 配置 中 设置 触发 距离 onReachBottomDistance。 在 触发 距离 内 滑动 期 间 , 本 事 
件 只 会 被 触发 一 次 。 

onPageScroll(Obiect) : 监听 用 户 滑动 页 面 。 其 参数 Object 具有 唯一 属性 scrollTop ,为 
Number 类 型 ,表示 页 面 在 垂直 方向 已 滚动 的 距离 (单位 为 px) 。 
onShareAppMessage(Object) : 监听 用 户 单 击 页 面 内 转发 按钮 < button > 组 件 (open- 
type 三 "share") 或 右上 和 角 菜 单 “ 转 发 ”按钮 的 行为 ,并 自 定义 转发 内 容 。 需 要 注意 的 是 
只 有 定义 了 此 事件 处 理 函 数 , 右 上 和 角 菜 单 才 会 显示 “转发 "按钮 。Object 的 参数 如 
表 2.10 所 示 。 


表 2.10 ”onShareAppMessage() 方 法 的 Object 参数 


参 数 类 型 说 明 最 低 版 本 
from string | 转发 事件 来 源 。button: 页 面 内 转发 按钮 ; menu: 右上 角 转 发 菜单 1.2.4 
如 果 from 值 是 button, 则 target 是 触发 这 次 转发 事件 的 button ,和 否 
target object 1.2.4 
则 为 undefined 
webViewUrl | string | 页 面 中 包含 < web-view > 组 件 时 ,返回 当前 < web-view > 的 URL 1.6.4 
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此 事件 处 理 函 数 需 要 返回 一 个 Object, 用 于 自 定义 转发 内 容 , 返 回 内 容 如 表 2.11 所 示 。 
表 2.11 onShareAppMessage() 方 法 返回 的 Object 对 象 


字 段 说 明 
title 转发 标题 ,当前 小 程序 名 称 
we 转发 路 径 , 当 前 页 面 path, 必 须 是 以 “/” 开 头 的 完整 路 径 


自 定义 图 片 路 径 , 可 以 是 本 地 文件 路 径 、 代 码 包 文件 路 径 或 者 网 络 图 片 路 径 。 支 持 PNG 及 


i Jrl 
imageUr | JPG, 显 示 图 片 长 宽 比 是 5 : 4, 另 外 使 用 默认 截图 


onShareAppMessage(Object) 方 法 的 示例 代码 如 下 : 


Page({ 
onShareAppMessage( res) { 
if (res.from == 'button') { // 页 面 内 "转发 "按钮 
console. log(res. target) 
} 
return { 
title: ' 自 定义 转发 标题 '， 
path: '/page/user?id= 123' // 自 定义 转发 页 面 路 径 
} 
} 
}) 


。 onResize(Object object) : 小 程序 屏幕 旋转 时 触发 。 从 基础 库 2.4.0 开始 支持 , 低 版 
本 需 做 兼容 处 理 。 
。 onTabItemTap(Object object) : 点 击 Tab 时 触发 。 从 基础 库 1.9.0 开始 支持 , 低 版 
本 需 做 兼容 处 理 。Object 的 参数 如 表 2.12 所 示 。 
表 2.12 onTabItemTap() 方 法 的 Object 参数 


参 数 类 型 说 明 最 低 版 本 
index string 被 点 击 tabltem 的 序号 ,从 0 开始 1.9.0 
pagePath string 被 点 击 tabltem 的 页 面 路 径 1.9.0 
text string 被 点 击 tabItem 的 按钮 文字 1.9.0 


onTabItemTap(Object) 方 法 的 示例 代码 如 下 : 


Page({ 
onTabItemTap( item) { 
console. log( item. index) 
console. log( item. pagePath) 
console. log( item. text) 
} 
}) 
}) 


2.4.3 页面 跳 转 


1. 跳 转 方式 
页 面 跳 转 在 小 程序 中 被 称 为 页 面 路 由 ,所 有 页 面 的 路 由 全 部 由 框架 进行 管理 。 框 架 以 
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栈 的 形式 维护 当前 的 所 有 页 面 。 当 发 生路 由 切换 的 时 候 , 页 面 栈 的 表现 如 表 2.13 所 示 。 


表 2.13 页 面 栈 
路 由 方式 页 面 栈 表现 
初始 化 新 页 面 入 栈 
打开 新 页 面 新 页 面 人 栈 
页 面 重 定向 当前 页 面 出 栈 , 新 页 面 人 栈 
页 面 返回 页 面 不 断 出 栈 , 直 到 返回 目标 页 
Tab 切换 页 面 全 部 出 栈 , 只 留 下 新 的 Tab 页 面 
重 加 载 页 面 全 部 出 栈 , 只 留 下 新 的 页 面 


开发 者 可 以 使 用 getCurrentPages() 函 数 获 取 当 前 页 面 栈 ,以 数组 形式 按 栈 的 顺序 给 
出 ,修改 页 面 栈 会 导致 路 由 和 页 面 状态 发 生 错误 。 路 由 方式 与 生命 周期 函数 的 对 应 关系 如 
表 2.14 所 示 。 


表 2.14 路 由 方式 与 生命 级 周期 函数 的 对 应 关系 


由 前 页 面 [ 

路 由 方式 触发 时 机 调用 函数 路 由 后 页 面 调用 函数 
初始 化 小 程序 打开 的 第 一 个 页 面 onLoad () .onShow() 
打开 新 页 面 本 全 和 有 ET 或 使 用 组 件 < navigator onHide() onLoad() .onShow() 
open-type= "navigateTo"/> 


a 调 API .redirectTo 或 使 用 组 件 < navigat 
页 面 重 定向 | 调用 detTO 六 使 用 得 件 < aovigitoe| inibacy [onload onShuwe 
openrtype 一 "redirectTo" /> 


调用 API wx.navigateBack 或 使 用 组 件 < navigator 
页 面 返回 openrtype 一 "navigateBack" > 用户 按 左上 角 返 回 | onUnload() | onShow() 
按钮 

调用 API wx. switchTab 或 使 用 组 件 < navigator 
openrtype 一 "switchTab"/> 或 用 户 切换 Tab 

调用 API wx. reLaunch 或 使 用 组 件 < _ navigator 


重启 动 机 册 onUnload() | onLoad() .onShow() 
open-type= "reLaunch"/> 


Tab 切换 见 表 2.15 


假设 A、B 页 面 为 tabBar 页 面 ,C 页 面 是 从 A 页 面 打开 的 页 面 ,D 页 面 是 从 C 页 面 打开 
的 页 面 ,Tab 切换 对 应 的 生命 周期 如 表 2.15 所 示 。 
表 2.15 Tab 与 生命 周期 


当前 页 面 路 由 后 页 面 触发 的 生命 周期 ( 按 顺 序 ) 
A A 无 
A B A.onHide() \B.onLoad()\B.onShow() 
A B( 再 次 打开 ) A.onHide()、B.onShow() 
C A C.onUnload() .A.onShow() 


B C.onUnload()、B.onLoad()、B.onShow() 

B D.onUnload() \C.onUnload()\B.onLoad()\B.onShow() 
D( 从 转发 进入 ) A D.onUnload() .A.onLoad() .A.onShow() 

D( 从 转发 进入 ) B D.onUnload() 、B.onLoad()、B.onShow() 
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路 由 方式 存在 不 同 点 : navigateTo 和 redirectTo 只 能 打开 非 tabBar 页 
面 ; switchTab 只 能 打开 tabBar 页 面 ; reLaunch 可 以 打开 任意 页 面 ; 调用 
页 面 路 由 传递 的 参数 可 以 在 目标 页 面 的 onLoad 中 获取 。 

[ 圆 ?-5 页 面 跳 转 小 案例 ,运行 效果 如 图 2.25 所 示 。 


页 面 通过 wx.navigateTo 方 式 跳 转 ， 点 击 左 上 
|. 点 击 这 里 通过 wx.switchTab 进 行 页 面 跳 转 标 可 以 返回 上 一 页 
[2 点击 这 里 通过 wx.redirectTo 进 行 页 面 跳 转 
3. 点 击 这 里 通过 wx.switchTab 进 行 tabBar 页 
硬 员 转 
88 只 
前 可 的 


(b) wx.navigateTo() 方 式 


|2. 当 前 页 面 通过 wx.redirectTo 方 式 跳 转 ， 无 法 返回 上 3. 当 前 页 面 通过 wx.switchTab 方 式 ， 跳 转 到 标题 
页 为 "我 的 "tabBar 所 对 应 的 页 面 
器 号 
全 册 
(c) wx.redirectTo() 方 式 (d) wx.switchTab( 方 式 


到 2.25 ”3 种 方式 的 页 面 跳 转 
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pages/pageturn/pageturn.wxml 文件 代码 如 下 : 


< view bindtap = "topageone"> 1. 点 击 这 里 通过 wx. switchTab 进行 页 面 跳 转 </view> 
< view bindtap = "topagetwo"> 2. 点 击 这 里 通过 wx. redirectTo 进行 页 面 跳 转 </view> 
< view bindtap = "totabpage"> 3. 点 击 这 里 通过 wx. switchTab 进行 tabBar 页 面 跳 转 </view> 


pages/pageturn/pageturn.js 文件 代码 如 下 : 


Page({ 
topageone: function() { 
wx. navigateTo( { 
url: '/pages/pageone/pageone'， 
}) 
}, 
topagetwo: function() { 
wx. redirectTo( { 
r1: '/pages/pagetwo/pagetwo', 
}) 
}, 
totabpage: function() { 
wx. SwitchTab({ 
rl: '/pages/mytab/mytab', 
}) 
} 
}) 


pages/pageturn/pageturn.wxss 文件 代码 如 下 : 


view { 
margin: 50rpx; 
border: lpx solid gray; 

} 

【代码 讲解 】 本 例 创 建 4 个 页 面 ,pageturn 页 面 是 项 目 首页 , pageone、pagetwo 和 
mytab 页 面 是 pageturn 页 面 中 3 种 不 同 的 跳 转 方式 的 着 陆 页 。 在 pageturn.wxml 文件 中 
放置 3 组 < view > 组 件 , 并 且 分 别 绑 定 了 点 击 事件 topageone() 函数 .topagetwo() 函数 和 
switchTab () 函 数 , 而 这 3 个 点 击 事件 使 用 了 小 程序 的 3 种 不 同 的 跳 转 接口 wx.navigateTo ()、 
wx.redirectTo() 和 wx.switchTab() 。 

图 2.25(b) 页 面 由 wx.navigateTo() 方 式 跳 转 而 来 ,着 陆 页 左上 角 的 返回 图 标 可 以 返回 
上 一 页 ; 图 2.25(c) 页 面 由 wx.redirectTo() 方 式 跳 转 而 来 ,着 陆 页 左上 角 没有 返回 图 标 ; 图 
2.25(d) 页 面 由 wx.switchTab() 方 式 跳 转 而 来 着陆 页 页 面 为 tabBar 页 面 。 


2.4.4 页 面 间 参数 传递 


在 页 面 跳 转 中 ,当前 页 可 将 数据 传递 到 着 陆 页 。 示 例 代码 如 下 : 


wx. navigateTo( { 
url: 'page2/page2?a= '+a+'sgb='+b 
}) 
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在 跳 转 页 中 ,使 用 onLoad() 机 数 在 加 载 页 面 时 接收 数据 ,在 options 中 
获取 传递 过 来 的 数值 。 

[ 贺 :-6 跨 页 面 传递 参数 小 案例 ,运行 效果 如 图 2.26 所 示 。 


点 击 这 里 进行 页 面 跳 上 一 个 页 面 传递 过 来 的 
转 ,传递 的 数值 为 : 1 数值 为 : 1 


(a) 页 面 初始 效果 (b) 页 面 跳 转 接受 参数 
图 2.26 跨 页 面 传递 参数 


pages/transfervalue/transfervalue.wxml 文件 代码 如 下 : 
< view bindtap = "toreceive"> 点 击 这 里 进行 页 面 跳 转 ,传递 的 数值 为 : 1 </view> 
pages/transfervalue/transfervalue.js 文件 代码 如 下 : 


Page({ 
toreceive: function() { 
wx. navigateTo({ 
url: '/pages/receive/receive?id=1' // 页 面 跳 转 并 传递 参数 
}) 
} 
}) 


pages/receive/receive.wxml 文件 代码 如 下 : 
<view> 上 一 个 页 面 传递 过 来 的 数值 为 : {{receiveData}}</view> 
pages/receive/receive.js 文件 代码 如 下 : 


Page({ 
data: { 
receiveData: null // 数 据 初始 化 为 空 值 


第 2 章 ”小 程序 开发 基础 0 2 


}, 
onLoad: function(options) { 
var receiveData = options. id; // 接 受 参数 并 赋值 
console. log(options) 
this. setData({ 
receiveData: receiveData // 更 新 receiveData 值 
}) 
}, 
}) 
【代码 讲解 】 本 例 在 transfervalue.wxml 文件 中 为 页 面 区 域 绑 定点 击 事件 ; 在 JS 文件 
中 自 定义 函数 toreceive(); 通过 设置 url: '/pages/receive/receive?id 二 1' 进 行 页 面 跳 转 并 
传递 值 为 1 的 参数 id; 在 着 陆 页 的 JS 文 件 中 自 定义 onLoad() 函 数 ; 通过 options.id 接收 到 
传递 过 来 的 参数 并 赋值 给 变量 receiveData; 通过 setData() 函数 修改 页 面 data 属性 
receiveData 的 值 ,然后 在 receive.wxml 文件 中 利用 数据 绑 定 显示 该 值 。 图 2.26(a) 为 跳 转 
页 ; 图 2.26(b) 为 着 陆 页 。 


2.4.5 模块 化 


模块 化 是 软件 工程 中 的 一 个 重要 概念 。 模 块 化 程序 设计 是 指 在 进行 程序 设计 时 将 一 个 
大 程序 按照 功能 划分 为 若干 小 程序 模块 ,每 个 小 程序 模块 完成 一 个 确定 的 功能 ,并 在 这 些 模 
块 之 间 建 立 必要 的 联系 ,通过 模块 的 互相 协作 完成 整个 功能 的 程序 设计 方法 。 使 用 模块 化 
思想 可 以 有 效 提高 软件 开发 和 维护 的 效率 ,小 程序 开发 也 需要 遵循 这 一 原则 。 

1. 局 部 变量 和 全 局 变量 

在 页 面 文件 中 声明 的 变量 和 函数 只 在 该 文件 中 有 效 ,在 不 同 的 文件 中 可 以 声明 相同 名 
字 的 变量 和 函数 ,互相 不 影响 。 当 开发 者 需要 让 数据 在 不 同 页 面 中 共享 时 ,可 以 在 app.js 中 
定义 全 局 变量 ,然后 在 其 他 JS 文件 中 使 用 getApp() 获 取 全 局 变量 。 

app.js 中 示例 代码 如 下 : 

App({ 

globalData: { 
msg: "hello xiaochengxu” 


} 
}) 


其 他 的 JS 文件 获取 app.js 中 的 全 局 变量 的 示例 代码 如 下 : 


var app = getApp() 

var msg = app.globalData.msg 

2. 代码 模块 化 

根据 软件 工程 “耦合 "和 * 内 聚 "的 要 求 , 小 程序 开发 过 程 中 可 以 把 一 些 内 聚 性 不 强 的 功 
能 代码 写 在 外 部 JS 文件 中 ,小 程序 提供 了 module.exports 和 exports 接口 对 外 部 JS 代码 
进行 定义 和 引用 。exports 是 module.exports 的 一 个 引用 ,因此 在 模块 中 随意 更 改 exports 
的 指向 会 造成 未 知 的 错误 ,所 以 更 推荐 开发 者 采用 module.exports 来 定义 模块 接口 。 小 程 
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序 目前 不 支持 直接 引入 node_modules, 开 发 者 需要 使 用 node_modules 的 时 候 建议 复制 相 
关 的 代码 到 小 程序 的 目录 中 ,或 者 使 用 小 程序 支持 的 npm 功能 。 
公共 JS 文件 common.js 中 定义 公用 函数 的 示例 代码 如 下 : 


function sayHello(name) { 
console. log("Hello $ {name} !") 
} 
function sayGoodbye(name) { 
console. log( "Goodbye $ {name} !") 
} 
module. exports. sayHello = sayHello 1/ 方式 1 推荐 使 用 
exports. sayGoodbye = sayGoodbye 


页 面 JS 文件 中 调用 公用 函数 的 示例 代码 如 下 : 


var common = require("../../utils/common. common. js") 
Page({ 
helloTom: function() { 


common, sayHello( "Tom") 
}, 
goodbyeTom: function() { 
common, sayGoodbye( "Tom" ) 
} 
}) 


2.4.6 页 面 自 定义 事件 函数 


1. 事件 的 定义 和 特点 

事件 是 视图 层 到 逻辑 层 的 通信 方式 ,特点 如 下 : 

。 事件 可 以 将 用 户 行为 反馈 到 逻辑 层 进 行 处 理 ; 

。 事件 可 以 绑 定 在 组 件 上 , 当 达 到 触发 事件 ,就 会 执行 逻辑 层 中 对 应 的 事件 处 理 函数 ， 

。 事件 对 象 可 以 携带 额外 信息 ,如 id ,dataset touches 。 

2. 事件 的 使 用 方式 

事件 的 使 用 需要 在 WXML 页 面 中 某 一 个 组 件 绑 定 事件 函数 名 ,在 JS 文件 中 的 page 中 
自 定义 相应 的 事件 处 理 函 数 。 

WMXL 绑 定 事件 的 示例 代码 如 下 : 


< button id = "buttonTest”bindtap = "tapName"> 我 是 按钮 组 件 </button > 
JS 文件 中 定义 事件 的 示例 代码 如 下 : 


Page({ 
tapName: function() { 
console. log(" 你 点 击 了 按钮 ") 
， 
}) 


3. 事件 的 分 类 
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。 冒 泡 事件 : 当 一 个 组 件 上 的 事件 被 触发 后 ,该 事件 会 向 父 节点 传递 。 
。 非 冒 泡 事 件 : 当 一 个 组 件 上 的 事件 被 触发 后 ,该 事件 不 会 向 父 节点 传递 。 
冒 泡 事件 的 类 型 及 说 明 如 表 2.16 所 示 。 


表 2.16 冒 泡 事件 的 类 型 及 说 明 


类 型 说 明 
touchstart 手指 触摸 动作 开始 
touchmove 手指 触摸 后 移动 
touchcancel 手指 触摸 动作 被 打 断 ,如 来 电 提 醒 , 弹 窗 
touchend 手指 触摸 动作 结束 
tap 手指 触摸 后 马上 离开 
> 手指 触摸 后 ,超过 350ms 再 离开 ,如 果 指 定 了 事件 回调 函数 并 触发 了 这 个 事件 ， 
tap 事件 将 不 被 触发 
longtap 手指 触摸 后 ,超过 350ms 再 离开 (推荐 使 用 longpress 事件 代替 ) 


transitionend 


会 在 wxss transition 或 wx.createAnimation 动画 结束 后 触发 


animationstart 


会 在 一 个 wxss animation 动画 开始 时 触发 


animationiteration 


会 在 一 个 wxss animation 一 次 迭代 结束 时 触发 


animationend 


会 在 一 个 wxss animation 动画 完成 时 触发 


touchforcechange 


在 支持 3D Touch 的 iPhone 设备 , 重 按时 会 触发 


除 表 2.16 之 外 的 其 他 组 件 自 定义 事件 如 无 特殊 声明 都 是 非 冒 泡 事件 ,如 form 的 

submit 事件 ,input 的 input 事件 .scroll-view 的 scroll 事件 等 。 

4. 事件 绑 定 和 冒 泡 

事件 绑 定 的 写法 同 组 件 的 属性 ,用 key= "value" 的 形式。 

。 key 以 bind 或 catch 开头 , 跟 上 事件 的 类 型 ,如 bindtap .catchtouchstart。 从 基础 库 
版 本 1.5.0 起 ,在 非 原生 组 件 中 ,bind 和 catch 后 可 以 紧 接 一 个 冒号 ,其 含义 不 变 , 如 
bind :tap .catch :touchstart 。 

。 value 是 一 个 字符 串 ,需要 在 对 应 的 Page 中 定义 同名 的 函数 ,否则 当 触 发 事件 的 时 
候 会 报错 。bind 事件 绑 定 不 会 阻止 冒 泡 事件 向 上 冒 泡 ;catch 事件 绑 定 可 以 阻止 冒 
泡 事件 向 上 冒 泡 。 

例如 有 3 个 < view > 组 件 ,其 中 A 包含 BB 包含 C, 示 例 代码 如 下 : 


<view id = "outer" bindtap = "tapl"> 


外 层 容器 A 


<view id= "middle" catchtap= "tap2"> 


中 间 容 器 B 


<view id= "inner" bindtap = "tap3"> 


内 层 容器 C 


</view> 
</view> 


</view> 


当 点 击 容 器 C 时 会 触发 tap3 事件 ,由 于 tap3 是 bindtap 类 型 的 冒 泡 事 件 ,所 以 其 父 节 
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点 容器 也 的 tap2 事件 会 被 触发 ,而 容器 B 的 tap2 事件 是 catchtap 类 型 ,catchtap 类 型 阻止 
事件 继续 向 上 冒 泡 , 即 容器 A 的 tapl 事件 不 会 被 触发 。 当 点 击 容 器 B 和 容器 A 时 ,只 能 分 
别 触 发 自己 的 tap2 和 tapl 事件 。 

5. 事件 对 象 

如 无 特殊 说 明 , 当 组 件 触发 事件 时 ,逻辑 层 绑 定 该 事件 的 处 理 函 数 会 收 到 一 个 事件 对 
象 。 事件 对 象 分 为 基础 事件 (BaseEvent)、 自 定义 事件 (CustomEvent) 和 触摸 事件 
(TouchEvent) 。 基 础 事件 (BaseEvent) 对 象 属性 如 表 2.17 所 示 。 


表 2.17 基础 事件 (BaseEvent) 对 象 属性 


性 | 型 | 时 
type string 事件 类 型 
timeStamp integer 事件 生成 时 的 时 间 戳 
target object 触发 事件 的 组 件 的 一 些 属性 值 集合 
currentTarget object 当前 组 件 的 一 些 属性 值 集合 


自 定义 事件 (CustomEvent) 对 象 属性 列表 (继承 BaseEvent) 如 表 2.18 所 示 。 
表 2.18 自 定义 事件 (CustomEvent) 对 象 属性 
属 性 类 型 说 明 


detail object 额外 的 信息 


触摸 事件 (TouchEvent) 对 象 属性 列表 (继承 BaseEvent) 如 表 2.19 所 示 。 
表 2.19 触摸 事件 (TouchEvent) 对 象 属性 


属 性 类 型 说 有明 
touches array 触摸 事件 ,当前 停留 在 屏幕 中 的 触摸 点 信息 的 数组 
changedTouches array 触摸 事件 ,当前 变化 的 触摸 点 信息 的 数组 


注意 : canvas 和 画布 组 件 中 的 触摸 事件 不 可 冒 泡 , 因 此 没有 currentTarget。 

各 种 事件 属性 的 含义 如 下 。 

。 type: 代表 事件 的 类 型 。 

。 timeStamp: 页 面 打开 到 触发 事件 所 经 过 的 毫秒 数 。 

。 target: 触发 事件 的 源 组 件 。 

。 currentTarget: 事件 绑 定 的 当前 组 件 。 

detail: 自 定义 事件 所 携带 的 数据 ,如 表单 组 件 的 提交 事件 会 携带 用 户 的 输入 ,媒体 

的 错误 事件 会 携带 错误 信息 。 

。 touches: 是 一 个 数组 ,每 个 元 素 为 一 个 Touch 对 象 , 表 示 当 前 停留 在 屏幕 上 的 触 

。 changedTouches: 数据 格式 同 touches, 表 示 有 变化 的 触摸 点 ,如 从 无 变 有 
(touchstart) ,位 置 变化 (touchmove) ,从 有 变 无 (touchend .touchcancel) 。 

基础 事件 对 象 中 的 target 和 currentTarget 属性 包含 的 参数 相同 ,如 表 2.20 所 示 。 
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表 2.20 target 和 currentTarget 参数 


属 性 类 型 说 明 
id string 当前 组 件 的 id 
tagName string 当前 组 件 的 类 型 
dataset object 当前 组 件 上 由 data- 开 头 的 自 定义 属性 组 成 的 集合 


。 dataset: 在 组 件 节 点 中 可 以 附加 一 些 自 定义 数据 。 这 样 ,在 事件 中 可 以 获取 这 些 自 
定义 的 节点 数据 ,用 于 事件 的 馆 辑 处 理 。 在 WXML 中 ,这 些 自 定义 数据 以 data- 开 
头 , 多 个 单词 由 连 字 符 -连接 。 这 种 写法 中 , 连 字 符 写 法 会 转换 成 驼峰 写法 ,而 大 写 
字符 会 自动 转 成 小 写字 符 。 例 如 : 


data-element-type 会 转换 为 event.currentTarget.dataset.elementType; 


data-elementType 会 转换 为 event.currentTarget.dataset.elementtype。 


touches 对 象 属性 如 表 2.21 所 示 。 


表 2.21 touches 对 象 属性 
属 性 类 型 说 明 

identifier number 触摸 点 的 标识 符 

距离 文档 左上 角 的 距离 ,文档 的 左上 角 为 原点 ,横向 为 X 轴 , 纵 向 
pageX, pageY number 

为 Y 轴 

人 距离 页 面 可 显示 区 域 (屏幕 除去 导航 条 ) 左 上 角 的 距离 ,横向 为 X 

clientX ,clientY number 


轴 , 纵 向 为 Y 轴 


canvas 画布 组 件 的 触摸 事件 中 携带 的 touches 是 CanvasTouch 数组 ,属性 如 表 2.22 


所 示 。 
表 2.22 ”CanvasTouch 对 象 属性 
属 性 类 型 说 明 
identifier number 触摸 点 的 标识 符 
距离 Canvas 左上 角 的 距离 ,Canvas 的 左上 角 为 原点 ,横向 为 X 
X，y number 


2.5 视图 层 


轴 , 纵 向 为 Y 轴 


微 信 小 程序 通过 视图 层 与 用 户 进 行 交 互 .WXML 文件 决定 页 面 的 结构 ,WXSS 文件 决 
定 页 面 的 样式 。 视 图 层 的 构成 如 下 。 
。 WXML(WeiXin Markup Language) : 用 于 定义 页 面 的 结构 ,类 似 于 HTML, 是 一 种 


标记 性 语言 


。 组 件 (Component) : 是 构成 页 面 的 基本 元 素 , 也 是 小 程序 界面 的 基本 组 成 单元 ; 
。 WXSS(WeiXin Style Sheet) : 用 于 定义 页 面 的 样式 ,类 似 于 CSS 语法 格式 。 
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本 节 介绍 视图 层 的 基本 概念 ,组 件 详 见 第 3 章 微 信 小 程序 组 件 , WXML 和 WXSS 详 见 
第 4 章 样式 与 布局 。 


2.5.1 数据 绑 定 


小 程序 数据 绑 定 指 的 是 在 WXML 页 面 中 存在 动态 数据 ,这 些 动态 数据 在 JS 文件 中 定 
义 和 维 护 。 根 据 场景 的 不 同 ,数据 绑 定 分 为 以 下 类 别 。 

1. 简单 绑 定 

在 WXML 文件 中 使 用 Mustache 语法 {{ 变 量 名 )) ,用 双 大 括号 将 变量 包 起 来 ,用 来 绑 
定 动态 数据 。 示 例 代码 如 下 : 

WXML 文件 中 : 


<view>{{message} }</view> 
JS 文 件 中 : 


Page({ 
data: { 
message: "Hello xiaochengxu" 
} 
}) 


2. 组 件 属性 绑 定 
组 件 属性 绑 定 指 被 绑 定 的 数据 存在 于 组 件 的 属性 内 ,示例 代码 如 下 : 


< view id="{{id}}"></view> 


3. 控制 属性 绑 定 
控制 属性 绑 定 指 被 绑 定 的 数据 存在 于 组 件 的 控制 属性 中 ,示例 代码 如 下 : 


< view wx:if ="{{condition}}"></view> 

在 JS 文件 中 设置 变量 condition 的 值 为 true 时 .< view > 组 件 会 显示 ; 当 condition 的 
值 修 改 为 false 时 , < view > 组 件 不 会 显示 。 

4. 运算 绑 定 

当 需 要 对 动态 数据 进行 运算 时 ,可 以 使 用 运算 绑 定 符 {{ })} 把 运算 表达 式 包 含 起 来 ,在 
页 面 被 加 载 的 时 候 ,{{ 从 内 的 运算 表达 式 将 会 执行 运算 。 运 算 绑 定 支 持 的 运算 类 型 有 三 元 
运算 ,算术 运算 ,逻辑 判断 、 字 符 串 运算 和 数据 路 径 运 算 。 

三 元 运算 示例 代码 如 下 : 

< view hidden = "{{result? true:false}}"> 隐 藏 该 组 件 </view> 


算术 运算 示例 代码 如 下 : 


<view> {{a + b}} + {{c}} + d </view> 
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逻辑 判断 示例 代码 如 下 : 


<view wx:if="{{x> 10}}"> 显 示 该 组 件 </view> 


字符 串 运算 示例 代码 如 下 : 

<view> {{"hello" + name}} </view> 

数据 路 径 运算 示例 代码 如 下 : 
<view>{{object. key1}} {{array[1]}}</view> 
5. 组 合 绑 定 


开发 者 使 用 绑 定 符号 {{)} 对 变量 、 常 量 和 符号 进行 组 合 ,构成 新 的 对 象 或 者 数组 。 数 组 
组 合 的 示例 代码 如 下 : 


<view wx:for="{{[1, x, 3, 4]}}"> {{item}} </view> 
对 象 组 合 的 示例 代码 如 下 : 

< template is = "objectCombine" data = "{{for: a, bar: b}}"></template> 
扩展 运算 符 “” 将 一 个 对 象 展 开 , 示 例 代码 如 下 : 


< template is = "objectCombine" data = "{{...objl，...obj2，e: 5}}"></template> 


2.5.2 ”条件 泻 


1. < view wx:if > 条件 演 染 
小 程序 < view > 组 件 中 使 用 wx:if 王 "{{condition} 和 来 控制 代码 块 显示 与 否 ,示例 代码 如 下 。 
WXML 文件 中 : 


< view wx:if ="{{condition}}"> 组 件 </view> 


上 述 代码 中 ,如 果 变 量 condition 取 值 为 false, 组 件 不 会 显示 。 
开发 者 可 以 通过 wx:elif 和 wx:else 来 增加 一 个 else 块 , 示 例 代码 如 下 : 
<view wx:if ="{{length > 5}}"> 这 是 组 件 1 </view> 
<view wx:elif = "{{length > 2}}"> 这 是 组 件 2 </view> 
< view wx:else > 这 是 组 件 3 </view> 
上 述 代码 中 , 当 length= 二 3 时 ,length > 5 不成立, 组 件 1 不 被 显示 ; length > 2 成 立 , 组 
件 2 被 显示 ,wx:else 语句 被 忽略 不 执行 。 
2. < block wx:f> 条 件 泻 染 
wx: 让 不仅 可 以 在 < view > 组 件 内 使 用 ,还 可 以 在 < block > 标签 内 使 用 ,示例 代码 如 下 : 
< block wx:if ="{ {false}}"> 
< view> 这 是 组 件 1 </view> 


<view> 这 是 组 件 2 </view> 
</block> 
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[ 圆 2-7 wx:if 实例 ,程序 运行 效果 如 图 2.27 所 示 。 


goodafternoon 


视频 讲解 


图 2.27 wx:if 条 件 泻 染 
pages/wxif/wxif.wxml 文件 的 代码 如 下 : 


<view class = "hello" wx:if ="{{hours<=12}}"> 
goodmorning 
</view> 

< view class = "hello" wx:elif ="{{hours<= 20}}"> 
goodafternoon 
</view> 

<view class = "hello" wx:else> 
goodevening 


</view> 
pages/wxif/wxif.js 文件 的 代码 如 下 : 


Page({ 

data: { 
hours:0, 

}, 

onLoad: function() { 
var myDate = new Date(); 
var hours = myDate. getHours( ); 
this. setData({ 


hours: hours 


第 2 音 。 小 程序 开发 基础 0 2 


}) 
} 
}) 
【代码 讲解 】 本 例 在 wxif.js 文件 中 获取 当前 时 间 的 时 钟 hours, 然 后 hours 被 绑 定 到 
wx:if 的 条 件 属 性 中 ,根据 hours 值 的 不 同 提示 不 同 的 问候 语 。 


2.5.3 列表 泻 染 


1. < view wx:for > 循环 演 染 

在 小 程序 < view > 组 件 上 使 用 wx:for 属性 遍历 数组 元 素 ,实现 代码 块 的 列表 演 染 。 示 
例 代码 如 下 。 

WXML 文件 中 : 


< View wx:for = "{{array}}"> 水 果 {{index}}: {{item}}</view> 
JS 文件 中 : 


Page({ 
data: { 
array: [ "苹果 "，" 香 若 "，" 菠 葛 "] 
} 
}) 
运行 结果 与 下 方 代码 一 致 : 


<view> 水 果 0: 于 果 </view> 
< view > 水 果 1: 香 攀 </view> 
< view > 水 果 2: 菠萝 </view> 
上 述 代码 中 ,index 是 数组 在 循环 遍历 时 当前 项 下 标 ,item 代表 数组 在 循环 遍历 时 的 当 
前 元 素 。 开 发 者 可 以 使 用 wx:for-item 和 wx:for-index 自 定义 当前 元 素 和 下 标的 变量 名 ， 
示例 代码 如 下 : 


wx:for — index = "goods - index" wx:for— item = "goods - item" 


加 2-8 ”列表 泻 染 小 案例 ,程序 运行 效果 如 图 2.28 所 示 。 
pages/wxfor/wxfor.wxml 文件 代码 如 下 : 


<! 一 商品 展示 部 分 -一 > 
<view class = "demo — box"> 
< block wx:for = "{{goodsdata} }" wx:for— item= "item"> 
< view class = "goods - box" bindtap = "btntodetail" data- id= "{{item. id}}"> 
< image class = "goods - pic" src = "{{itenm. image}}"></image> 
< view class = "goods — title">{{item. title} }</view> 
< view class = "goods — titleTwo">{{item. titleTwo} }</view > 
< view class = "row"> 
< view class = "goods - price"> ¥ {{item. price} }</view > 
< text class = "goods - btn"> 看 相似 </text> 
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</view> 
</view> 
</block> 
</view> 


(HUAWED P30 (HUAWEI) 荣 埠 V20 
志 杰 光 祭 卡 三 重地 光 特 美 自拍 。 浆 织 视屏 4300 万 深 直 机 
¥4288.00 是 ¥3699.00 


1E80S 入 耳 式 监听 耳机 1E60 入 耳 式 HiFi 百 机 
过 海 守 和 Hifi 音 乐 囊 机 吉海 吉尔 入 耳 区 HIF 机 


¥2399.00 ¥799.00 


图 2.28 wx:for 循环 浑 染 
pages/wxfor/wxfor.js 文件 代码 如 下 : 


Page({ 
data:{ 
goodsdata: [ 
{id: 0, 
title: "(HUAWEI)P30", 
titleTwo:" 超 感光 徕卡 三 摄 | 逆 光 智 美 自拍 "， 
price: "4288.00", 
image: "https://res. vmallres. com/pimages//product/6901443293513 
/800_800_1555464685019mp. png" 
}, 
{ id: 1, 
title: "(HUAWEI) 荣 焰 V20"， 
titleTwo:" 魅 眼 视屏 4800 万 深 感 相机 "， 
price: "3699. 00", 
image: "//img12.360buyimg. com/n7/jfs/t25954/134/1930444050/488286 
/31587d0d/5bbf1fc9N3ced3749. jpg" 
}, 
{ id: 2, 
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title: "IE80S 入 耳 式 监听 耳机 "， 
titleTwo:" 森 海 塞 尔 HiFi 音乐 耳机 "， 
price: "2399.00"， 
image: "https://images. wincheers. net/UpLoad/Web/ProductImg 
/2018 — 06 — 15/NEW_XM/IE80S. jpg" 
}, 
{ id: 3, 
title: "IE60 入 耳 式 HiFi 耳机 "， 
titleTwo: " 森 海 塞 尔 人 耳 式 HIFI 耳机 "， 
price: "799.00", 
image: "https://images. wincheers. net/UpLoad/Web/ProductImg 
/2017 — 08 — 14/NEW_XM/IE- 60 — 4. png" 


} 
}) 


pages/wxfor/wxfor.wxss 文件 代码 如 下 : 


flex- direction: row; flex— wrap: wrap; padding: 30rpx; 
} 
.goods — box { 
width: 49 %; margin— bottom: 20rpx; 
} 
/* 商品 内 容 样式 * / 
.goods— pic { 
width: 220rpx; height: 250rpx; 
margin: 0 auto; display: block; 
} 
.row { 
display: flex; flex- direction: row; 
justify- content: space ~ around; 
} 
/* 看 相似 样式 * / 
.goods 一 btn { 
border: 1px solid # e3e3e3; border - radius: 20rpx; 
margin ~ top: 20rpx; width: 100rpx; 
height: 40rpx; line— height: 40rpx; 
font — size: 24rpx; color: #aaa; 
letter - spacing: 2rpx; text ~ align: center; 


/* 商品 标题 样式 x/ 
.goods -title { 
font — size: 30rpx; font - weight: 600; text ~ align: center; 


.goods — titleTwo { 
font ~ size: 24rpx; margin 一 top: 10rpx; text — align: center; 


/* 商 品 价格 样式 * / 
.goods - price { 
font - size: 30rpx; margin - top: 20rpx; color: # ee3b3b; 
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【代码 讲解 】 wxfor.js 中 的 goodsdata 数组 存放 了 商品 的 信息 ; wxfor.wxml 使 用 wx: 
for 条 件 循 环 泻 染 数组 中 多 件 商品 的 image'title titleTwo 和 price 等 值 。 循 环 渲染 经 常用 
F 商 品 和 新 闻 的 列表 页 。 

2. < block wx: for > 
类 似 于 < block wx:if>,< block > 标签 也 可 以 添加 循环 控制 信息 wx:for, 用 来 循环 浑 染 
代码 块 。 示 例 代码 如 下 : 

<block wx:for= "{{[' 苹 果 '，' 香 敬 '，' 菠 葛 ']}}"> 

<view> {{index}}: </view> 


<view> {{item}} </view> 
</block> 


效果 等 同 于 下 面 代码 : 


< view> 水 果 : 0</view> 
< view> 种 类 : 苹果 </view> 
< view> 水 果 : 1</view> 
< view> 种 类 : 香蕉 </view> 
< view> 水 果 : 2 </view> 
< view > 种 类 : 菠 草 </view> 
3. 嵌 套 循环 澶 染 
wx:for 可 以 典 套 ,类 似 于 循环 结构 中 的 多 重 循环 ,例如 ,小 程序 中 九 九 乘法 表 的 示例 代 
码 如 下 : 
< View wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for— item= "i"> 
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for— item= "j"> 
<view wx:if ="{{i<= j}}"> 
0 De 0 
</view> 
</view> 
</view> 


2.5.4 模板 


小 程序 框架 允许 开发 者 在 WXML 文件 中 使 用 模板 (template) ,模板 的 使 用 分 为 模板 的 
定义 和 模板 的 引用 。 

1. 定义 模板 

小 程序 使 用 < template > 之 前 需要 在 WXML 文件 中 把 代码 片段 定义 为 模板 ,使 用 name 
属性 自 定义 其 名 称 。 示 例 代码 如 下 : 


< template name = "myTemp"> 
<view> 
< text > Name: {{name}}</text > 
< text > Age: {{age}}</text> 
</view> 
</template > 
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上 述 代码 中 , 自 定义 了 一 个 名 称 为 myTemp 的 模板 。 

2. 模板 的 引用 

在 需要 引用 模板 的 页 面 中 使 用 < template > 标签 可 以 引用 模板 内 容 , 使 用 is 属性 ,引用 
需要 引用 的 模板 ,示例 代码 如 下 。 

WXML 文件 中 : 


< template is = "myTemp" data = "{{...person}}"/> 


通过 data 属性 传递 。 
[加 2-9 <template > 模板 小 案例 ,设计 两 个 模板 ,一 个 模板 需要 接收 
参数 , 另 一 个 模板 不 需要 接收 参数 ,程序 运行 效果 如 图 2.29 所 示 。 


回 二 站 并 
视频 讲解 


贱 是 头 部 文件 ， 我 不 需要 参数 
是 正文 


县 是 尾部 文件 传递 过 来 的 参数 是 2019 


图 2.29 template 模板 
pages/template/body.wxml 文件 代码 如 下 : 


< import src = "header"/> 
< template is = "header"/> 
我 是 正文 

< import src = "footer"/> 


< template is = "footer" data= "{{Data}}" /> 
pages/template/body.js 文件 代码 如 下 : 


Page({ 
data: { 
Data:2019 
}, 
}) 


pages/template/header.wxml 文件 代码 如 下 : 


< template name = "header"> 
< view > 我 是 头 部 文件 ,我 不 需要 参数 </view> 
</template> 


pages/template/body.wxml 文件 代码 如 下 : 


< template name = "footer"> 


< view > 我 是 尾部 文件 < text > 传递 过 来 的 参数 是 {{Data}}</text > 
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</view> 


</template> 


【代码 讲解 】 本 例 包 括 3 个 页 面 : body、header 和 footer,header 和 footer 页 面 定 义 了 
模板 ,其 中 header 模板 不 需要 引用 方 的 参数 传递 , 而 footer 模板 需要 引用 方 的 参数 传递 。 
本 例 还 提醒 开发 者 在 引用 模板 的 时 候 , 需 要 使 用 < import > 引用 标签 把 模板 所 在 的 页 面 引 入 
进来 。 


2.5.5 引用 


WXML 提供 两 种 文件 引用 方式 : import 和 include。 
1. import 


import 可 以 在 文件 中 使 用 目标 文件 定义 的 < template > 模板 ,示例 代码 如 下 : 


< import src = "item. wxml" /> 


< template is = "item" data = "{{text:'hello, xiaochengxu'}}" /> 


<import > 具有 作用 域 ,假设 有 A、B 和 C3 个 页 面 ,其 中 B import A, 且 C import B,B 
页 面 可 以 使 用 A 页 面 定义 的 < template > 模板 ,C 页 面 可 以 使 用 B 页 面 定义 的 < template > 
模板 ,但 是 C 页 面 不 可 以 使 用 A 页 面 定义 的 < template > 模板 。 示 例 代码 如 下 。 

A 页 面 a.wxml 文件 中 : 


< template name = "有 "> 
< text > 页面 模板 一 /text > 
</template > 


B 页 面 b.wxml 文件 中 : 


< import src = "a.wxml" /> 
< template name = "B"> 

< text > 页 面 模板 </text > 
</template> 


C 页面 c.wxml 文件 中 : 


< import src = "b. wxml" /> 

< template is = "A" /> <! -- 引入 模板 不 成 功 ,C 页 面 需 要 自己 import -一 > 

< template is = "B"” /> <! -- 引入 模板 成 功 ,C 页 面 有 import B--> 

开发 者 在 引用 中 应 注意 页 面 之 间 的 关系 ,正确 引用 。 

2. include 

使 用 < include > 可 以 将 目标 文件 中 除了 < template > 模板 以 外 的 全 部 代码 引入 ,相当 于 
复制 到 < include > 位 置 。 从 软件 工程 的 角度 看 ,一 个 文件 的 代码 行 尽 量 不 要 超过 3 个 屏幕 ， 
当 文 件 代码 行 过 多 的 时 候 , 可 以 将 功能 相关 的 代码 独立 成 一 个 文件 ,然后 再 使 用 < include > 
标签 将 独立 出 去 的 代码 引用 回来 ,从 而 增强 了 页 面 的 可 读 性 和 可 维护 性 。 
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2.6 实 训 项 目 一 一 商品 列表 页 和 详情 页 


本 项 目 有 商品 列表 页 和 商品 详情 页 两 个 页 面 , 当 点 击 商品 列表 页 中 的 ”四 器 
某 件 商品 时 ,页 面 跳 转 到 商品 详情 页 ,项 目的 知识 点 涉及 app.js 全 局 数据 和 ” 乱 
页 面 JS 之 间 的 数据 交互 .数据 绑 定 、 循 环 浑 染 、 页 面 跳 转 和 页 面 间 参 数 传递 
等 知识 点 。 本 项 目 是 对 本 章 所 学 知识 点 的 有 效 检测 。 

项 目的 实现 过 程 如 下 。 视频 讲解 

第 一 步 ; 打开 微 信 web 开发 者 工具 ,如 图 2.30 所 示 ,新 建 项 目 “ 第 二 章 实 训 项 目 ”, 项 目 
结构 如 图 2.31 所 示 ,新 建 list 和 detail 两 个 页 面 。 


SAB 
项 目 名 称 。 “数码 产品 类 电 商 小 程序 项 目 
+ Q 三 
目录 | Fw 程序 ffK 友 chz 邱 二 章 j 目 
v DD pages 
ApplD wx81a9d7bbade2ee1b v DD detail 
车 无 ApplD 可 注册 3 detailjs 
或 使 用 测试 号 {} detailjson 
开发 模式 | 小 三友 <> detail wxml 
a was detail wxss 
后 站 服务 ” 〇 不便 用 云 眼 务 v Dist 
小 程序 云 开 发 listjs 
{) fistjson 
代 。 了 解 详 情 人 
出 ws list wxss 
腾讯 云 D README md 
语言 JavaScript 目 appjs 
{} appjson 
wss app wxss 
{%) project .config json 
ms {stemapjson 


图 2.30 新建 项 目 图 2.31 项 目 结构 


第 二 步 : 在 app.js 文件 中 定义 全 局 数据 。 
三 步 : 实现 list 和 detail 两 个 页 面 ,它们 的 执行 效果 如 图 2.32 和 图 2.33 所 示 。 
app.js 文件 代码 如 下 : 


App({ 
goodsdata: [ 
{ id: 0, 
title: "(HUAWEI)P30", 
titleTwo: " 超 感光 徕卡 三 摄 | 逆光 智 美 自拍 "， 
price: "4288. 00", 
image: "https://res. vmallres. com/pimages//product/6901443293513 
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超 感 光 侠 卡 三 理 | 这 光 特 美 自拍 。 ”的 织 视 屏 4800 万 深 夫 相机 
¥4288.00 ¥3699.00 


超 感光 徕卡 三 摄 | 逆光 智 美 自拍 
IE80S 入 耳 式 监听 耳机 。 IE60 入 耳 式 HiFi 了 机 ¥4288.00 
过 海 塞 尔 HiFi 音 乐 责 机 森 悔 塞 尔 入 囊 式 HIFI 互 机 
¥2399.00 ¥799.00 
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/800 800 1555464685019mp. png" 


}， 
{ id: 1, 
title: "(HUAWEI) 荣 炊 V20"， 
titleTwo:" 魅 眼 视屏 4800 万 深 感 相机 "， 
price: "3699. 00", 
image: "//img12.360buyimg. com/n7/jfs/t25954/134/1930444050 
/488286/31587d0d/5bbflfc9N3ced3749. jpg" 


}, 

{ id: 2, 
title: "IE80S 人 耳 式 监听 耳机 "， 
titleTwo: " 森 海 塞 尔 HiFi 音乐 耳机 "， 
price: "2399.00"， 
image: "https://images. wincheers. net/UpLoad/Web/ProductImg 

/2018 - 06 - 15/NEW_XM/IE80S. jpg" 

}, 

0 3; 
title: 
titleTwo:" 森 海 塞 尔 入 耳 式 HIFI 耳机 "， 
price: "799.00", 
image: "https://images. wincheers. net/UpLoad/Web/ProductImg 

/2017 ~ 08 — 14/NEW_XM/IE - 60 — 4. png" 


(HUAWEI) P30 (HUAWEI) 荣 起 V20 


(HUAWEI) P30 


list 页 


detail 页 
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pages/list/list.wxml 文件 代码 如 下 : 


<view class = "demo — box"> 
< block wx:for = "{{goodsdata}}" wx:for — item= "item"> 
< view class = "goods - box" bindtap = "todetail" data- id= "{{iten. id}}"> 
< image class = "goods — pic" src = "{{item. image}}"></inmage> 
<view class = "goods — title">{ {item. title} }</view > 
<view class = "goods — titleTwo">{ {item. titleTwo} }</view > 


<view class = "row"> 
<view class = "goods — price">¥ {{item. price} }</view> 
< text class = "goods - btn"> 看 相似 </text > 
</view> 
</view> 
</block> 
</view> 


pages/list/list.js 文件 代码 如 下 : 


var app = getApp() 
Page({ 
data:{ 
goodsdata:null 
}, 
onLoad( ){ 
this. setData( { 
goodsdata:app. goodsdata 
}) 
}, 
todetail: function(e) { 
var listid = e.currentTarget. dataset. id 
console. log(" 你 点 击 了 第 ”+ (listid + 1) + "个 商品 " 
wx. navigateTo( { 
url: '../detail/detail?listid=' + listid 
}) 
} 
}) 


pages/list/list.wxss 文件 代码 如 下 : 


/* 商品 标题 样式 * / 
.goods{ 
text ~ align: center; 
} 
.title { 
font — size: 34rpx; 
} 
/* 商品 价格 样式 */ 
.Price { 
color: #f00; font - size: 32rpx; 
padding - top: 20rpx; padding — left: 15rpx; 
} 
/* 商品 展示 外 部 样式 */ 
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.box — demo { 
display: flex; flex- direction: column; 
width: 100 %; height: 100rpx; 

} 


pages/detail/detail.wxml 文件 代码 如 下 : 


<view class = "goods"> 
<view class= 'title'> < image src= "{{data. image}}"></image ></view> 
<view class = 'title'>{{data. title}} </view> 
<view class = 'title'> {{data. titleTwo} }</view> 
<view class = 'price'>¥ {{data. price}} 
</view> 
</view> 


pages/detail/detail.js 文件 代码 如 下 : 


const app = getApp(); 
Page({ 
data: { // 数 据 初 始 化 
data:null 
}, 
// 页 面 加 载 时 获得 app. js 中 的 数据 
onLoad: function(option) { 
var id = option. listid 
this. setData( { 
data: app. goodsdata[ id] 
}) 
} 
}) 


pages/detail/detail.wxss 文件 代码 如 下 : 


/* 商品 标题 样式 * / 
.goods{ 
text ~ align: center; 
} 
title { 
font — size: 34rpx; 
} 
/* 商品 价格 样式 * / 
.price { 
color: #f£00; font— size: 32rpx; 
padding ~ top: 20rpx; padding — left: 15rpx; 
} 
/* 商品 展示 外 部 样式 */ 
.box— demo { 
display: flex; flex- direction: column; 
width: 100 %; height: 100rpx; 
} 


【代码 讲解 】 因为 list 和 detail 两 个 页 面 都 需要 用 到 同一 商品 数据 ,所 以 本 实 训 项 目 
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中 涉及 的 商品 数据 存放 在 app.js 中 ,list.js 和 detail.js 文件 的 onLoad() 函数 执行 语句 main 
_key: goodsdata:app.goodsdata 获取 app.js 文件 中 的 商品 数据 。 

list.wxml 文件 再 使 用 < block wx:for > 循环 泻 染 把 所 有 的 商品 在 页 面 中 显示 出 来 。 点 
击 事件 todetail() 实 现 商 品 列表 页 到 商品 详情 页 的 跳 转 。 

detail.wxml 页 面 使 用 数据 绑 定 的 方法 把 detail.js 获取 的 数据 在 页 面 中 显示 出 来 。 
detail.js 获取 app.js 的 全 局 数据 和 list.js 获取 全 局 数据 有 所 不 同 , detail.js 使 用 语句 data: 
app.goodsdata[id] 获 取 数 据 , 语 句 中 的 id 是 由 list 页 面 传递 而 来 。 页 面 跳 转 时 的 url: '-/ 
detail/detail?listid 一 "十 listid 是 两 个 跳 转 页 面 之 间 传 递 数 据 的 有 效 方法 ,在 着 陆 页 detail.js 
中 传递 过 来 的 数据 被 封装 在 option 对 象 中 。 


微 信 小 程序 组 件 


微 信 小 程序 框架 为 开发 者 提供 了 一 系列 的 基础 组 件 ,这 些 原生 组 件 让 小 程序 具有 良好 
的 用 户 体验 ,同时 也 方便 开发 者 快速 开发 。 
本 章 主要 目标 
。， 了 解 小 程序 组 件 的 含义 ; 
"熟练 掌握 常见 的 容器 组 件 . 内 容 组 件 . 表 单 组 件 . 导 航 组 件 、 媒 体 组 件 和 地 图 组 件 的 
属性 以 及 用 法 ; 
"综合 运用 小 程序 组 件 完成 问卷 调查 项 目的 设计 与 开发 。 


3.1 组 件 概述 


组 件 是 视图 层 基本 的 组 成 单元 ,具备 UI 风格 样式 以 及 特定 的 功能 效果 。 当 打开 某 款 
小 程序 后 ,界面 中 的 图 片 .文字 等 元 素 都 需要 使 用 组 件 , 小 程序 组 件 使 用 灵活 ,组件 之 间 通过 
相互 嵌 套 进行 界面 设计 ,开发 者 可 以 通过 组 件 的 选择 和 样式 属性 设计 出 不 同 的 界面 效果 。 
一 个 组 件 包括 开始 标签 和 结束 标签 ,属性 用 来 装饰 这 个 组 件 的 样式 。 

其 语法 格式 如 下 : 

< 标签 名 称 属性 = " 值 "> 


内 容 
</ 标 签名 称 > 


示例 代码 如 下 : 
< button class = "btn"> 我 是 按钮 组 件 </button > 


上 述 代码 用 < button > </button > 表示 一 个 按钮 组 件 ,在 < button > 标签 中 通过 class 一 "btn" 
为 <button > 组 件 添加 样式 btn。 小 程序 目前 提供 的 通用 属性 如 表 3.1 所 示 。 
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表 3.1 小 程序 组 件 通用 属性 


属 性 名 类 型 说 明 备 注 
Ee 在 当前 界面 中 用 id 值 标识 唯一 的 组 件 , 并 且 
id string 组 件 的 唯一 标识 不 能 有 两 个 及 以 上 id 值 同名 
class string 组 件 的 样式 类 为 一 个 或 多 个 组 件 设置 样式 类 
style string 组 件 的 内 联 样式 “| 动态 设置 内 联 样式 
hidden boolean 组 件 的 显示 /隐藏 | 组 件 均 默 认为 显示 状态 
人 和 本 自 定义 属性 当 组 件 触发 事件 时 会 附带 将 该 属性 和 值 发 送 
给 对 应 的 事件 处 理 函 数 
bind * /catch * eventHandler ”| 组 件 的 事件 为 组 件 绑 定 /捕获 事件 


3.2 视图 容器 组 件 


视图 容器 (View Container) 组 件 用 于 排版 页 面 为 其 他 组 件 提 供 载 体 。 视 图 容器 有 


view scroll-view 和 swiper 3 种 。 


3.2.1 view 


view 容器 是 页 面 中 最 基本 的 容器 组 件 , 通 过 高 度 和 宽度 来 定义 容器 大 小 。< view > 相 
当 于 HTML 中 的 < div > 标签 ,是 一 个 页 面 中 最 外 层 的 容器 ,能 够 接受 其 他 组 件 的 嵌入 , 例 
如 ,多 个 view 容器 的 骨 套 。view 容器 可 以 通过 flex 布局 定义 内 部 项 目的 排列 方式 ( 详 见 第 
4 章 flex 布局) 。 其 属性 如 表 3.2 所 示 。 


表 3.2 <view > 组 件 属性 


属 性 名 类 型 默认 值 说 明 
hover boolean false 是 否 启 动 点 击 态 
es eta none 按 住 容器 后 的 样式 。 当 属性 设置 为 hoverclass 一 
"none" 时 ,没有 点 击 效 果 
hover-stop-propagation | boolean false 指定 是 否 阻 止 本 容器 的 祖先 节点 出 现 点 击 态 
hover-start-time number 50 按 住 容器 后 多 久 出 现 点 击 态 , 单 位 为 ms 
hover-stay-time number 400 手指 离开 后 点 击 态 的 保留 时 长 ,单位 为 ms 


[ 贺 3-1 本 例 设计 了 两 组 父子 view 容器 的 点 击 态 , 第 一 组 父子 view 国 % 


容器 中 子 view 容器 不 阻止 点 击 态 向 父 容器 


子 view 容器 阻止 点 击 态 


个 突 


向 父 容 


器 传递 ,程序 运行 效果 如 图 3.1 所 示 。 


pages/view/view.wxml 文件 代码 如 下 : 


< view class = "demo - box"> 
< view class = "title"> 1.view 小 案例 </view> 
< view class = "title">(1) 不 阻止 父 容器 的 view - hover </view> 


qr 
T 


传递 ,第 二 组 父子 view 容器 中 


回 
视频 讲解 
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<view class = "view parent" hover - class = "view hover"> 我 是 父 类 容器 
< view class = "view- son" hover - class = "view- hover"> 我 是 子 类 容器 </view> 
</view> 
<view class = "title">(2) 阻 止 父 容器 的 view - hover </view> 
"view - hover"> 我 是 父 类 容器 
<view class = "view - son" hover - class = "view - hover" hover - stop - propagation hover — 
start 一 time = "3000" hover - stay -time = "4000"> 我 是 子 类 容器 </view> 


< view class = "view- parent" hover - class 


</view> 
</view> 
1.view 小 案例 1.view 小 案例 1view 小 案例 
(1) 不 阻止 父 容器 的 view-hover (1) 不 阻止 父 容器 的 view-hover (1) 不 阻止 父 容器 的 view-hover 
我 是 父 类 容器 我 是 父 类 容器 


(2) 阻 止 父 容器 的 view-hover 
我 是 父 类 容器 


(2) 阻 止 父 容器 的 view-hover 他 阻止 父 容器 的 view-hover 
我 是 父 类 容器 我 是 父 类 宕 器 


(a) 页 面 初始 效果 


i 第 1 组 子 容器 


图 3.1 组 件 view 小 案例 


pages/view/view.wxss 文件 代码 如 下 : 


.View — parent { 
width: 100 %; 
height: 350rpx; 
background - color: pink; 
text ~ align: center; 
} 
.view— son { 
width: 50 %; 
height: 200rpx; 
background - color: skyblue; 
margin: 20rpx auto; 
text — align: center; 
} 
.view — hover { 
background - color: red; 
} 


app.wxss 文件 代码 如 下 : 
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.demo 一 box { 

padding: 20rpx; margin: 20rpx 60rpx; border: 1rpx solid gray; 
.title { 

display: flex; 

flex- direction: row; 

margin: 20rpx; 

justify- content: center; 

} 

app.wxss 文件 中 代码 为 公共 样式 ,用 于 设置 页 面 的 布局 以 及 标题 样式 ,在 本 章 所 有 案 
例 中 均 相 同 ,在 后 面 的 案例 中 省 略 。 

【代码 讲解 】 本 例 在 view.wxml 文件 中 放置 两 组 < view > 容器 ,在 app.wxss 文件 中 设 
置 父 容器 背景 色 为 浅 红色 , 子 容 器 背景 色 为 浅 蓝 色 ,通过 hover-class 二 "view-hover" 为 标签 
增加 属性 ,点 击 态 均 设置 为 点 击 后 背景 色 更 新 为 红色 ,第 一 组 不 阻止 点 击 态 传递 给 父 容器 ， 
在 第 二 组 子 类 容器 中 通过 hover-stop-propagation 来 阻止 点 击 态 传递 给 父 容器 ,并 设置 属性 
hover-start-time 二 "3000" ,hover-stay-time 一 "4000" , 当 点 击 子 容 器 时 ,3s 后 出 现 点 击 状态 ， 
当 手 指 松 开 4s 后 , 子 容器 背景 色 变 为 初始 颜色 。 

图 3.1(a) 为 页 面 初始 效果 ; 图 3.1(b) 为 点 击 第 1 组 的 子 容器 后 ,父子 容器 背景 色 均 变 
为 红色 ; 图 3.1(c) 为 点 击 第 2 组 的 子 容器 后 , 仅 有 子 容 器 背景 色 变 为 红色 。 


3.2.2 scroll-view 


scroll-view 容器 为 可 滚动 的 视图 容器 ,允许 用 户 通过 手指 在 容器 上 滑动 来 改变 显示 区 
域 ,常见 的 滑动 方向 有 水 平滑 动 和 垂直 滑动 。 其 属性 如 表 3.3 所 示 。 
表 3.3 < scrolhview > 组 件 属 性 


属 性 名 类 型 | 默认 值 说 明 

scroll-x boolean false | 允许 横向 滑动 

scroll-y boolean none | 允许 纵向 滑动 

upper-threshold number 50 距 顶 部 /左边 多 远 时 (单位 : px) ,触发 scrolltoupper 事件 

lower-threshold number 50 距 顶部 /右边 多 远 时 (单位 : px) ,触发 scrolltolower 事件 

scroll-top number 设置 纵向 滚动 条 位 置 

scroll-left number 设置 横向 滚动 条 位 置 

CR ni 值 应 为 菜子 元 素 id。 设 置 哪个 方向 可 滚动 , 则 在 哪个 方 
向 滚动 到 该 元 素 

scroll-with-animation | boolean false | 在 设置 滚动 条 位 置 时 使 用 动画 过 渡 

enable-back-to-top boolean false 0S 丰年 届 次 部 交 加、Andmoid 疯 而 村 下 术 深 动 林 汉 回 
顶部 . 仅 支 持 纵向 

bindscrolltoupper eventhandle 滚动 到 顶部 /左边 ,会 触发 scrolltoupper 事件 

bindscrolltolower eventhandle 滚动 到 底部 /右边 ,会 触发 scrolltolower 事件 

滚动 时 触 发，event. detail 一 { scrollLeft，scrollTop， 

bingscroll eventhandle 

scrollHeight, scrollWidth, deltaX ,deltaY} 
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注意 : 在 使 用 纵向 滚动 时 ,需要 为 < scroll-view > 设置 一 个 固定 宽度 。 
[ 贺 3-2 本 例 设计 一 个 纵向 scroll-view 组 件 , 运 行 效果 如 图 3. 2 所 示 。 


*” ha 人 17403 100% i 


至 fdemo CO) 


100% Em) 


© 


2.scroll-view 小 案例 
实现 纵向 滚动 


元 素 一 


元 素 三 


(a) 页 面 初 始 效果 (b) scroll-view 深 动 后 


图 3.2 组 件 scroll-view 小 案例 


croll-view/scroll-view.wxml 文件 代码 如 下 : 


page 


< view class = "demo — box"> 
<view class = "title"> 2. scroll - view 小 案例 </view> 
<view class = "title"> 实 现 纵向 滚动 </view> 

< scroll— view scrol1 一 Y> 

< view class = "scroll - item - Y"> 元 素 一 </view> 

< view class = "scroll - item - Y"> 元 素 


< View class = "scroll - item 一 y"> 元 素 
<view class = "scroll - item 一 Y"> 元 素 四 </view> 
< View class = "scroll - item 一 y"> 元 素 五 </view> 
<view class = "scroll - item 一 Y"> 元 素 六 </view> 
</scroll - view> 

</view> 


pages/scroll-view/scroll-view.wxss 文件 代码 如 下 : 


scroll — view { 
height: 600rpx; width: 250rpx; margin: 0 auto; 
} 
.scroll — item—yf{ 
height: 200rpx; line— height: 200rpx; 
text — align: center; background ~ color: skyblue; border: 


2.scroll-view 小 案例 


实现 纵向 滚动 


元 素 四 


元 素 五 


1px solid gray; 
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} 


【代码 讲解 】 本 例 在 scroll-view.wxml 文件 中 放置 < scroll-view > 组 件 ,通过 设置 属性 
scroll-y, 人 允许 组 件 上 下 滑动 ,在 scroll-view.wxss 文件 中 设置 其 高 度 为 600rpx, 使 得 scroll- 


view 组 件 能 够 纵向 滚动 ,在 < scroll-view > 中 嵌 套 6 组 < view > 用 于 显示 滚动 效果 ,内 部 元 素 
宽度 均 为 250rpx。 


图 3.2(a) 为 页 面 初始 效果 ; 图 3.2(b) 为 < scroll-view > 组 件 滑动 到 底部 后 的 效果 。 


Q 搜索 京东 商品 
一 品质 共 友 节 一 加 
低 至 满 199 减 30 .“ 
CEEEEB 用 2 和 
专场 推荐 
iew 
家 居 软 饰 喝 高 端 洋酒 
满 300 减 30 3 件 8 折 
油漆 涂料 节 818 手 机 节 中 三 
每 400 减 40 用 P30 低 至 36， 上 ib 
热门 搜索 
要 儿 如 粉 孝 帐 儿童 玩 具 
5 AS 
BB 入 EE 有 
首页 分 类 推荐 购物 车 我 的 


图 3.3 scroll-view 组 件 应 用 实例 


3.2.3 swiper 


< swiper > 组 件 为 滑 块 视图 容器 ,通常 用 于 图 片 之 间 的 切换 播放 ,被 形象 地 称 为 轮 播 图 。 
其 属性 如 表 3.4 所 示 。 


表 3.4 <swiper > 组 件 属 性 


属 性 名 类 型 默 认 值 说 明 
indicator-dots boolean false 是 否 显 示 面 板 指 示 点 
indicator-color color rgba(0,0,0,0.3) | 指示 点 颜色 
indicator-active-color color 井 000000 当前 选择 的 指示 点 颜色 
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续 表 
属 性 名 类 型 默 认 值 说 明 
autoplay boolean false 是 否 自动 切换 
current number 0 当前 所 在 滑 块 的 index 
current-item-id string i ede nn 
被 同时 指定 
interval number 5000 自动 切换 时 间 间 隔 ,单位 : ms 
duration number 500 滑动 动画 时 长 ,单位 : ms 
circular boolean false 是 否 采用 衔接 滑动 
vertical boolean false 滑动 方向 是 否 为 纵向 
| ee 前 边 虹 ,可 用 于 露出 前 一 项 的 一 小 部 分 , 接 
previous-margin string 0px 受 px 和 i 值 
i a "0px" 后 边 距 , 可 用 于 露出 后 一 项 的 一 小 部 分 , 接 
受 px 和 rpx 值 
display-multiple items | number 1 同时 显示 的 滑 块 数量 
是 否 跳 过 未 显示 的 滑 块 布局 , 设 为 true 可 
skip-hidden-item-layout | boolean false 优化 复杂 情况 下 的 滑动 性 能 ,但 会 丢失 隐 
藏 状态 滑 块 的 布局 信息 
_， current 改变 时 会 触发 change 事件 ,event. 
bindchange eventhandle 
detail = {current: current, source: source} 
swiper-item 的 位 置 发 生 改 变 时 会 触发 
bindtransition eventhandle transition 事件 , event. detail 二 {dx: dx， 
dy: dy} 


bindanimationfinish 


加 3-3 swiper 组 件 小 案例 ,运行 效果 如 图 3.4 所 示 。 


eventhandle 


pages/swiper/swiper.wxml 文件 代码 如 下 : 


< view class = "demo — box"> 
<view class = "title"> 3. swiper 小 案例 </view> 


<view class = "title"> 图 片 进行 翻 页 切换 </view> 


动画 结束 时 会 触发 animationfinish 事件 ， 


event.detail 同上 


< swiper indicator - dots autoplay interval = "3000"> 


< Swiper 一 item > 

< image src = "/images/cat1. jpg"></image> 
</swiper — item> 
< swiper 一 让 em > 

< image src = "/images/cat2. jpg"></image> 
</swiper — item> 
< swiper — item> 

< image src = "/images/cat3. jpg"></image> 


</swiper — item> 


</swiper > 


</view> 
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3.swiper 小 案例 
图 片 进 行 翻 页 切换 


3.swiper 小 案例 
图 片 进行 翻 页 切换 


3.swiper 小 案例 
图 片 进 行 翻 页 切换 


VY 


LS 


(a) 页 面 初始 效果 (b) 切换 到 第 2 张 照片 (c) 切换 到 第 3 张 照片 
图 3.4 swiper 组 件 小 案例 
es/swiper/swiper.wxss 文件 代码 如 下 : - 
pages/swiper/swiper. WXSS 件 代 下 二 人生 TG 


swiper { 
height: 350rpx; 
} 
【代码 讲解 】 本 例 在 swiper. wxml 文件 中 放置 


< swiper > 组 件 ,设置 属性 autoplay 允许 自动 切换 图 片 ， 
设置 属性 interval= 二 "3000" ,图 片 每 隔 3s 发 生 一 次 切换 ， 
属性 indicator-dots 用 于 显示 面板 指示 点 ,< swiper > 组 
件 中 组 套 3 组 < swiper-item >, swiper 容器 的 高 度 设置 
为 300rpx。 
图 3.4(a) 为 页 面 初始 效果 ,此 时 默认 显示 第 一 张 
图 片 ; 图 3.4(b) 和 图 3.4(c) 分 别 显 示 第 二 张 照片 和 第 
:= 张 照片 ,照片 数据 来 自 本 地 ,保存 在 images 文件 
类 不 
在 图 3.5 中 ,虚线 框 是 < swiper > 组 件 在 携程 小 程序 
中 的 应 用 。 


3.3 基础 内 容 组 件 


swiper 2 搜索 目的 地 /交通 /景点 /酒店 


四 从 全 证 


村 点 门票 。 周边 游 。 美食 林 。。 亲子 游 攻略 


机 票 火车 票 . 抢 票 
PP 


图 3.5 swiper 组 件 应 用 实例 


3.3.1 icon 


<icon > 为 图 标 组 件 , 常 用 于 页 面 装饰 ,开发 者 可 以 自 定义 其 类 型 .大 小 和 颜色 。 其 属性 
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如 表 3.5 所 示 。 


表 3.5 < icon > 组 件 属性 
属性 名 类 型 默认 值 说 明 


icon 的 类 型 ,有 效 值 : success, success_no_circle, info, 


type string false 和 

warn, waiting,cancel, download, search, clear 
size number/string 23px icon 的 大 小 ,单位 : px( 基 础 库 2.4.0 起 支持 rpx) 
color color 井 000000 | icon 的 颜色 , 同 CSS 的 color 


例如 , 自 定义 一 个 绿色 、40px 大 小 的 success 图 标 。 
WXML 中 的 代码 如 下 : 


< icon type = "success" size= "40" color = "green" /> 


如 果 有 多 个 图 标 需要 批量 生成 ,利用 wx:for 循环 精简 代码 ,在 JS 文件 的 data 中 存放 
数据 ,然后 在 WXML 文件 中 使 用 < block > 标签 进行 列表 泻 染 。 

批量 生成 不 同 大 小 的 success 图 标的 示例 代码 如 下 。 

WXML 中 的 代码 如 下 : 


<view> 
< block wx:for = "{{iconSize}}"> 
< icon type = "success" size="{{item}}" /> 
</block> 
</view> 


JS 文件 代码 如 下 : 


Page({ 
data: { 
iconSize: ["20", "25", "30"] 
} 
}) 


上 述 代码 生成 的 图 标 大 小 分 别 为 20rpx、25rpx 和 30rpx。 
[ 贺 3-4 icon 组 件 小 案例 ,运行 效果 如 图 3.6 所 示 。 
pages/icon/icon.wxml 文件 代码 如 下 : 


< View class = "demo — box"> 

< view class = "title"> 4. icon 小 案例 </view> 
< view class = "title">(1) 实 现 大 小 变化 </view> 
< block wx:for = "{{iconSize}}"> 

< icon type = "success" size="{{item}}" /> 
</block > 
<view class = "title">(2) 实 现 内 容 变化 </view> 
< block wx:for = "{{iconType}}"> 

< icon type= "{{item}}" size= "40" /> 
</block> 
< view class = "title">(3) 实 现 颜色 变化 </view> 
< block wx:for = "{{iconColor}}"> 
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< icon type = "success" size= "40" color = "{{item}}" /> 
</block> 
</view> 


4.jicon 小 案例 
(1) 实 现 大 小 变化 


.oo 所 


(2) 实 现 内 容 变化 


©@ O00000 
Q@ 


(3) 实 现 颜色 变化 


图 3.6 icon 组 件 小 案例 
pages/icon/icon.js 文件 代码 如 下 : 


Page({ 
data: { 
iconSize: [20, 30, 40, 50, 60, 70], 


iconType: [ 
"success", "success_no_circle", "info", "warn", "waiting", "cancel", "download", 


"search", "clear" 
]， 
iconColor: [ 
"red", "orange", "yellow", "green", "red", "blue", "purple" 
], 
} 
}) 
【代码 讲解 】 本 例 在 icon.js 文件 中 的 data 中 设置 3 个 数组 ,分别 为 iconSize \iconType 
和 iconColor, 用 于 设置 图 标的 大 小 、 图 标的 类 型 和 图 标的 颜色 。 在 icon.wxml 文件 中 使 用 < 


block > 标签 配合 wx:for 批量 生成 多 个 标签 组 件 。 


3.3.2 text 
< text > 为 文本 组 件 ,用 于 文字 的 显示 ,小 程序 的 文本 组 件 支持 转 义 字符 。 其 属性 如 
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表 3.6 所 示 。 
表 3.6 < text> 组 件 属性 


属 性 名 类 型 默 认 值 说 明 最 低 版 本 
selectable boolean false 文本 是 否 可 选 1.1.0 
space string 显示 连续 空格 1.4.0 
decode boolean false 是 否 解 码 1.4.0 


[ 圆 3-5 组 件 text 小 案例 ,运行 效果 如 图 3.7 所 示 。 
pages/text/text.wxml 文件 代码 如 下 : 


< view class = "demo - box"> 
< view class = "title"> 5. text 小 案例 </view> 
< view class = "title"> 用 于 文本 的 显示 </view> 
< text >{ {text} }</text > 
< button bindtap = "add"> 增 加 一 行 </button > 
< button bindtap = "reduce"> 删 除 一 行 </button > 
</view> 


5.text 小 案例 
用 于 文本 的 显示 


2019 年 ， 中 国 要 推进 这 70 个 工程 项 
目 : 制定 实施 新 时 期 “互联 网 

+” 行 动 ， 实 施 数字 经 济 、 “互联 
网 +” 重 大 工程 ， 建 设 人 工 智能 创 
新 应 用 先导 区 ， 持 续 推进 大 数据 综 
合 试验 区 建设 ; 加 快 5G 商 用 步伐 和 
1Pv6 规 模 部 署 ， 加 强人 工 智能 、 工 
业 互联 网 、 物 联网 等 新 型 基础 设施 


5.text 小 案例 


用 于 文本 的 显示 


2019 年 ， 中 国 要 推进 这 70 个 工程 项 
目 ; 制定 实施 新 时 期 “互联 网 

+” 行 动 ， 实 施 数字 经 济 、“ 互 联 
网 +” 重 大 工程 ， 建 设 人 工 智能 创 
新 应 用 先导 区 ， 持 续 推进 大 数据 综 
合 试验 区 建设 ; 加 快 5G 商 用 步伐 和 
1Pv6 规 模 部 署 ， 加 强人 工 智能 、 工 
业 互联 网 、 物 联网 等 新 型 基础 设施 


5 text 小 案例 

用 于 文本 的 显示 
2019 年 ， 中 国 要 推进 这 70 个 工程 项 
目 : 制定 实施 新 时 期 “互联 网 
+” 行 动 ， 实 施 数字 经 济 、“ 互 联 
网 +” 重 大 工程 ， 建 设 人 工 智 能 创 
新 应 用 先导 区 ， 持 续 推进 大 数据 综 
合 试验 区 建设 ; 加 快 5G 商 用 步伐 和 
1Pv6 规 模 部 署 ， 加 强人 工 智能 、 工 
业 互联 网 、 物 联网 等 新 型 基础 设施 


建设 和 融合 应 用 。 建设 和 融合 应 用 。 建设 和 融合 应 用 。 
增加 一 行 增加 - 行 增加 一 行 
增加 一 行 
删除 一 行 删除 一 行 
到 除 一 行 
(a) 页 面 初始 效果 (b) 增 加 一 行文 字 (9) 删除 一 行文 字 


图 3.7 text 组 件 小 案例 


pages/text/text. js 文件 代码 如 下 : 


var initData = "2019 年 ,中 国 要 推进 这 70 个 工程 项 目 : 制定 实施 新 时 期 "互联 网 + "行动 ,实施 数字 
经 济 " 互 联网 + "重大 工程 ,建设 人 工 智 能 创新 应 用 先导 区 ,持续 推进 大 数据 综合 试验 区 建设 ; 加 快 
5G 商用 步伐 和 IPv6 规模 部 署 , 加 强人 工 智 能 .工业 互联 网 . 物 联 网 等 新 型 基础 设施 建设 和 融合 
应 用 。" 
var extraLine = []; 
Page({ 

data: { 


// 创 建 一 个 空 数组 
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text: initData 


}, 


add: function(e) { 
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extraLine. push( "增加 一 行 ") // 增 加 一 行 
this. setData( { 
text: initData + '\n' + extraLine. join('\n') // 更 新 数组 值 
}) 
}, 
reduce: function(e) { 
if(extraLine. length > 0) { 
extraLine. pop() // 删 除 一 行 


this. setData( { 
text: initData + '\n' + extraLine. join('\n') // 更 新 数组 值 


【代码 讲解 】 


图 3.7(c) 为 点 


本 例 在 text. wxml 文件 中 通过 < text > 组 件 存放 文字 ,以 及 增加 两 个 
< button > 按钮 ,分 别 绑 定 了 点 击 事件 ,用 于 实现 增加 一 行 和 删除 一 行 的 操作 ,对 应 在 text.js 文 
件 中 自 定 义 add() 和 reduce() 两 个 函数 。 

图 3.7(a) 为 初始 页 面 ; 图 3.7(b) 为 点 击 “ 增 加 一 行 ”按钮 后 ,在 文字 内 容 下 方 增加 一 行 ; 


3.3.3 progress 


击 “ 删 除 一 行 ”按钮 后 ,新 增加 的 一 行 消失 , 回 到 页 面 初始 状态 。 


< progress > 为 进度 条 组 件 ,用 于 进度 的 显示 ,长 度 单位 默认 为 px。 其 属性 如 表 3.7 


所 示 。 
表 3.7 < progress > 组 件 属性 
属 性 名 类 型 默 认 值 说 明 
percent number 百分比 0 中 一 100 色 
show-info boolean false 在 进度 条 右 侧 显示 百分比 
border-radius number/string 0 圆 角 大 小 
font-size number/string 16 右 侧 百分比 字体 大 小 
stroke-width number/string 6 进度 条 线 的 宽度 
color string #09BB07 进度 条 颜色 (请 使 用 activeColor) 
activeColor string #09BB07 已 选择 的 进度 条 的 颜色 
backgroundColor string # EBEBEB 未 选择 的 进度 条 的 颜色 
active boolean false 进度 条 从 左 往 右 的 动画 
backwards :动画 从 头 播 ; forwards: 动画 从 上 
active-mode string backwards 


次 结束 点 接着 播 


例如 , 自 定义 一 个 当前 进度 为 30. 宽 度 为 10rpx 的 进度 条 ,示例 代码 如 下 : 


< progress percent = "30" stroke - width = "10rpx"></progress> 
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其 运行 效果 如 图 3.8 所 示 。 


本 


图 3.8 进度 条 图 示 


圆 3-6 progress 组 件 小 案例 ,运行 效果 如 图 3.9 所 示 。 
pages/progress/progress.wxml 文件 代码 如 下 : 


< view class = "demo — box"> 
<view class = "title"> 6. progress 小 案例 </view> 
<view class = "title"> 增 加 和 减少 进度 </view> 


< progress percent = "{{progress}}" stroke— width = "10rpx" show- info></progress> 


add"> 增 加 10 %</button> 
reduce"> 减 少 10% </button > 


< button bindtal 
< button bindtap 
</view> 


6.progress 小 案例 6.progress 小 案例 6.progress 小 这 例 | 
增加 和 减少 进度 增加 和 也 少 进度 增加 和 减少 进度 
ys 30% es 20% tt 30% 
增加 10%6 增加 10% 增加 103% | 
减少 10% 减少 10% 减少 10% | 
] 
(a) 页 面 初始 效果 (b) 减少 10% (c) 增加 10% 


图 3.9 progress 组 件 小 案例 


pages/progress/progress.js 文件 代码 如 下 : 


var per = 30; 


Page({ 

data: { 
progress: per, // 数 据 初始 化 

}, 

add: function(e) { 
per += 10; // 增 加 10% 
if (per > 100) { 

per = 100; // 进 度 超过 100% 不 增加 

} 
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this. setData({ 


progress: per // 更 新 进度 值 
]) 
玉 
reduce: function(e) { 
per -= 10; // 减 少 10% 
if (per <0) { 
per = 0; // 进 度 小 于 0% 不 减少 


} 
this. setData({ 
progress: per // 更 新 进度 值 
}) 
} 
}) 


pages/progress/progress.wxss 文件 代码 如 下 : 


progress { 

padding: 80rpx; 

} 

【代码 讲解 】 本 例 在 progress. wxml 文件 中 放置 < progress > 组 件 ,通过 设置 属性 
show-info 让 进度 条 右边 显示 当前 进度 值 ,以 及 增加 两 个 < button > 按钮 ,分别 绑 定 了 点 击 事 
件 ,用 于 实现 增加 10% 的 进度 值 和 减少 10% 的 进度 值 ,在 progress.js 文件 中 自 定义 add() 和 
reduce() 两 个 函数 。 

图 3.9(a) 为 初始 页 面 ; 图 3.9(b) 为 点 击 * 减 少 10%” 按 钮 后 ,进度 值 从 30% 变 为 20%; 
图 3.9(c) 为 点 击 * 增 加 10%” 按 钮 后 ,进度 值 从 20% 变 为 30%。 


3.4 表单 组 件 


表单 组 件 在 网 页 开发 中 十 分 常见 ,对 于 小 程序 而 言 , 当 用 户 需 要 设计 注册 、 登 录 等 页 面 
时 可 以 使 用 表单 。 表 单 组 件 是 多 类 组 件 的 统称 。 


3.4.1 button 


< button > 为 按钮 组 件 , 是 常用 的 表单 组 件 之 一 ,用 于 事件 的 触发 以 及 表单 的 提交 。 其 
属性 如 表 3.8 所 示 。 


表 3.8 <button > 组 件 属性 


属 性 名 类 型 默认 值 说 上 明 最 低 版 本 
Size string default 按钮 的 大 小 
type string default 按钮 的 样式 类 型 
plain boolean | false 按钮 是 否 钱 空 ,背景 色 透 明 
disabled boolean | false 是 否 禁用 
loading boolean | false 名 称 前 是 否 带 loading 图 标 
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续 表 
属 性 名 类 型 默认 值 说 上 明 最 低 版 本 


用 于 < form > 组 件 ,点 击 分 别 会 触发 
< form > 组 件 的 submit/reset 事件 


form-type string 


open-type string button-hover | 微 信 开 放 能 力 Ll 


指定 按钮 按 下 去 的 样式 类 。 当 hover- 


hover-class string button-hover dlass 一 "none" 时 ,没有 点 击 态 效果 

指定 是 否 阻止 本 节点 的 祖先 节点 出 现 
hover-stop-propagation | boolean | false 1.5.0 
hover-start-time number | 20 按 住 后 多 久 出 现 点 击 态 , 单 位 : ms 
hover-stay-time number | 70 手指 松 开 后 点 击 态 保留 时 间 ,单位 : ms 


注意 : button-hover 默认 为 {background-color: rgba(0, 0, 0, 0.1) ; opacity: 0.7; } 。 
size 属性 值 如 下 。 

(1) default: 默认 按钮 ,宽度 与 手机 屏幕 宽度 保持 一 致 。 

(2) mini: 迷你 按钮 ,尺寸 小 于 默认 按钮 。 

示例 代码 如 下 : 


< button > 默认 按钮 </button> 

< button size = "mini"> 迷 你 按钮 </button > 
其 运行 效果 如 图 3.10 所 示 。 

type 属性 值 如 下 。 

(1) primary: 主要 按钮 ,颜色 为 绿色 。 
(2) default: 默认 按钮 ,颜色 为 灰白 色 。 
(3) warn: 警告 按钮 ,颜色 为 红色 。 
示例 代码 如 下 : 


< button type = "primary"> primary 按钮 </button > 
< button type = "default"> default 按钮 </button > 
< button type = "warn"> warn 按钮 </button> 


其 运行 效果 如 图 3.11 所 示 。 


primary 按 钮 


default 按 钮 
默认 按钮 
图 3.10 ”默认 按钮 和 迷你 按钮 图 3.11 type 属性 值 对 应 的 按钮 


form-type 属性 值 如 下 。 
(1) submit: 提交 表单 。 
(2) reset: 重 置 表单 。 
示例 代码 如 下 : 


< button form- type= "submit"> 提 交 按 钮 </button > 
< button form - type = "reset"> 重 置 按钮 </button> 


其 运行 效果 如 图 3.12 所 示 。 


提交 按钮 


重 置 按钮 


图 3.12 form-type 属性 值 对 应 的 按钮 


[ 辆 ] 3-7 button 组 件 小 案例 ,运行 效果 如 图 3.13 所 示 。 


7.button 小 案例 
(1) 迷 你 按钮 


se 
(2) 按 钮 状态 
普通 按钮 


加 载 按钮 
(3) 增 加 按钮 事件 
点 我 获取 用 户 信息 


图 3.13 button 组 件 小 案例 


pages/button/button.wxml 文件 代码 如 下 : 


< view class = "demo - box"> 
< view class = "title"> 7.button 小 案例 </view> 
< view class = "title">(1) 迷 你 按钮 </view> 
<button size= "mini" type = "primary"> 主 要 按钮 </button > 
< button size = "mini" type = "default"> 次 要 按钮 </button > 
< button size = "mini" type = "warn"> 警 告 按 钮 </button > 
< view class = "title">(2) 按 钮 状态 </view> 
< button > 普通 按钮 </button > 
< button disabled> 禁 用 按钮 </button > 
< button loading > 加载 按钮 </button > 
<view class = "title">(3) 增 加 按钮 事件 </view> 


Re 


重 
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视频 讲解 


< button bindgetuserinfo = " getUserDetail” open - type = "getUserInfo"> 点 我 获取 用 户 信息 
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</button> 
</view> 


pages/button/button.js 文件 代码 如 下 : 


Page({ 
getUserDetail: function(e) { 
console. log(e. detail. userInfo) 
} 
}) 


pages/button/button.wxss 文件 代码 如 下 : 


button { 
margin: 10rpx; 

} 

【代码 讲解 】 在 button.wxml 文件 中 设置 3 组 效果 ,分 别 为 迷你 按钮 .普通 按钮 和 带 点 
击 事 件 按钮 。 第 1 组 设置 相同 的 size 属性 和 不 同 的 type 属性 实现 3 种 不 同类 型 的 迷你 按 
钮 ; 第 2 组 设置 属性 disabled 和 loading 实现 按钮 禁用 和 加 载 动画 效果 ; 第 3 组 通过 
bindgetuserinfo 王 "getUserDetail" 为 按钮 增加 事件 ,并 追加 open-type 王 "getUserInfo" 状 
态 , 然 后 在 JS 文件 中 定义 点 击 事件 。 


3.4.2 checkbox 


< checkbox > 为 复 选 框 组 件 , 常 用 于 在 表单 中 进行 多 项 数据 的 选择 。 复 选 框 的 
< checkbox-group > 为 父 控件 ,其 内 部 嵌 套 若干 个 < checkbox > 子 控件 。 
< checkbox-group > 组 件 只 有 一 个 属性 ,如 表 3.9 所 示 。 


表 3.9 过 checkbox-group > 组 件 属 性 
属 性 名 类 型 默认 值 说 明 


< checkbox-group > 选中 项 发 生 改 变 时 触发 change 事件 ， 
detail 二 (value:[ 选 中 的 checkbox 的 value 数组 ]} 


bindchange eventhandle 


< checkbox > 组 件 的 属性 如 表 3.10 所 示 。 
表 3.10 < checkbox > 组 件 属性 


属 性 名 类 型 默认 值 说 明 
< checkbox > 标识 ,选中 时 触发 < checkbox-group > 的 


al stri 
Ne Te change 事件 ,并 携带 < checkbox > 的 value 
disabled boolean false 是 否 禁 用 
checked boolean false 当前 是 否 选 中 ,可 用 来 设置 默认 选中 
color color checkbox 的 颜色 , 同 CSS 的 color 
示例 代码 如 下 : 


< checkbox — group > 


| 84 


第 3 音 。” 微 信 小 程序 组 件 03 


< checkbox value = "tiger"”checked = "true" /> 老虎 
< checkbox value = "elephant" disabled = "true" /> 大 象 
< checkbox value = "lion" /> 狮子 
< checkbox value = "penguin" /> 企鹅 
</checkbox - group > 


其 运行 效果 如 图 3.14 所 示 。 


v 老虎 国 大 象 | 狮子 企 歼 


如 图 3.14 所 示 , 老 虎 " 选 项 被 选中 “大 象 "选项 禁止 选择 “狮子 "和 ee8 
“ 企 热 "选项 均 未 选中 。 衣 lL 
[ 圆 3-8 “checkbox 组 件 小 案例 ,运行 效果 如 图 3.15 所 示 。 视频 讲解 


民 | Console Sources Network Security AppData Audits Sensor 


四 @ top | @@ | Fiher 
8.checkbox 小 案例 checkbox 发 生 change 事 件 ， 扒 带 value 信 为 :> ["Lion”] 
利用 for 循 环 批量 生成 checkbox 发 生 change 事 件 ， 换 带 value 值 为 * (2) ["Lton"，"pengutn"] 
老虎 “| 大 象 | “ 狮子 企 checkbox 发 生 change 事 件 ， 损 带 value 值 为， > (3) [“Lton"，*penguin"，“eLh“] 


鹅 | 订 鹿 “天 啤 > 


(a) 多 个 选项 被 选中 (b) 多 个 选项 被 选中 时 Console 输 出 的 内 容 
图 3.15 checkbox 组 件 小 案例 


pages/checkbox/checkbox.wxml 文件 代码 如 下 : 


<view class = "demo — box"> 
<view class = "title"> 8. checkbox 小 案例 </view> 
<view class = "title"> 利 用 for 循环 批量 生成 </view > 
< checkbox - group bindchange = "checkboxChange"> 
< label wx:for = "{{items}}"> 
< checkbox value = "{{ item. name} }" checked = "{ { item. checked}}" />{{item. value}} 
</label > 
</checkbox - group > 
</view> 


pages/checkbox/checkbox.js 文件 代码 如 下 : 


Page({ 
data: { 
items: [ 
{ name: "tiger", value: "老虎 " }， 
{ name: "elephant"，value: "大 象 " }， 
{ name: "lion"，value: "狮子 "，checked: "true" }, 
{ name: "penguin"，value: "企鹅 " }， 
{ name: "elk"，value: " 康 鹿 "”}， 
{ name: "swan"，value: "天 笋 " }， 
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jj， 
checkboxChange:function(e) { 
console. log("checkbox 发 生 change 事件 ,携带 value 值 为 : "，e. detail. value) 
} 
}) 


【代码 讲解 】 本 例 首先 在 checkbox.js 文件 中 的 data 中 定义 一 个 数组 items, 用 于 记录 
复 选 框 的 名 称 (name)、 值 (value) 以 及 选中 情况 ,并 在 check. wxml 文件 中 使 用 
< checkbox-group > 标签 包 庄 < checkbox >, 使 用 < label > 标签 配合 wx:for 实现 批量 生成 多 
个 checkbox 组 件 ; 其 次 在 < checkbox-group > 标签 上 绑 定 监听 事件 ,在 checkbox.js 文件 中 自 定 
义 checkboxChange() 函数 ,以 达到 每 次 被 触发 后 都 在 Console 控制 台 输 出 最 新 选中 的 值 。 

图 3.15(a) 为 多 个 选项 被 选中 后 的 效果 ; 图 3.15(b) 为 Console 控制 台 输出 的 内 容 , 显 
示 被 选中 的 选项 所 携带 的 值 。 


3.4.3 input 


<input > 为 输入 框 组 件 , 常 用 于 文本 (如 姓名 、 年 龄 等 信息 ) 的 输入 。 其 属性 如 表 3.11 
所 示 。 


表 3.11 <input> 组 件 属 性 


属 性 名 类 型 默认 值 说 明 
value string 输入 框 的 初始 内 容 
type string "text" input 的 类 型 
password boolean false 是 否 是 密码 类 型 
placeholder string 输入 框 为 空 时 的 占 位 符 
placeholder-style | string 指定 placeholder 的 样式 
placeholder-class | string "input-placeholder" 指 定 placeholder 的 样式 类 
disabled boolean false 是 否 禁用 
maxlength number 140 最 大 输入 长 度 , 设 置 为 一 1 的 时 候 不 限制 最 大 长 度 
指定 光标 与 键盘 的 距离 ,单位 : px( 基 础 库 2.4.0 起 支持 
cursor-spacing number 0 rpx)。 取 input 距离 底部 的 距离 和 cursor-spacing 指定 距离 
的 最 小 值 作为 光标 与 键盘 的 距离 
auto-focus boolean false (即将 废弃 ,请 直接 使 用 focus) 自动 聚焦 , 拉 起 键盘 
focus boolean false 获取 4 
confirm-type string "done” | 设置 键盘 右 下 角 按钮 的 文字 , 仅 在 type 王 'text' 时 生效 
confirm-hold boolean false 点 击 键 盘 右 下 角 按 钮 时 是 否 保 持 键盘 不 收 起 
Cursor number 指定 focus 时 的 光标 位 置 
光标 起 始 位 置 ,自动 聚集 时 有 效 , 需 与 selection-end 搭配 
selection-start number 一 1 
使 用 
光标 结束 位 置 ,自动 聚集 时 有 效 , 需 与 selection-start 搭配 
selectionrend number | 
使 用 
adjust-position boolean true 键盘 弹 起 时 ,是 否 自 动 上 推 页 面 
键盘 输入 时 触发 ,event detail 二 {value，cursor，keyCode} ， 
bindinput eventhandle keyCode 为 键 值 ,基础 库 2.1.0 起 支持 ,处 理 函数 可 以 直接 


返回 一 个 字符 串 , 将 蔡 换 输入 框 的 内 容 
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续 表 
属 性 名 类 型 | 默认 值 说 明 
oo ee 输入 框 聚 焦 时 触发 ,event. detail 二 {value, height} ,height 
为 键盘 高 度 , 在 基础 库 1.9.90 起 支持 
bindblur eventhandle 输入 框 失去 焦点 时 触发 ,event.detail 二 {value: value} 
bindconfirm eventhandle 点 击 * 完 成 "按钮 时 触发 ,event.detail 二 {value: value} 


type 属性 值 如 下 。 

(1) text: 文本 输入 键盘 。 

(2) Number: 数字 输入 键盘 。 

(3) idcard: 身份 证 输入 键盘 。 

(4) digit: 带 小 数 点 的 数字 键盘 。 
confirm-type 属性 值 如 下 。 

(1) send: 右 下 角 按 钮 为 “发 送 ”。 
(2) search: 右 下 角 按 钮 为 “搜索 ”。 
(3) next: 右 下 角 按 钮 为 “下 一 个 ”。 
(4) go: 右 下 角 按 钮 为 “前 往 ”。 

(5) done: 布下 角 按 钮 为 “完成 ”。 E 
贺 3-9 input 组 件 小 案例 ,运行 效果 如 图 3.16 所 示 。 视频 讲解 


9.input 小 案例 
(1) 文 字 输 入 框 
888888 
(2) 密 码 输入 框 
TT 
(3) 禁 用 输入 框 
该 输入 框 已 经 被 禁用 
(4 ) 为 输入 框 增加 事件 监听 
888888 
[EY Console Sources Network Security AppData 
四 @ twp | @@ | Fer 
getInput 前 发 ， 输 入 框 的 内 容 发 生 改 变 ， 当 前 值 为 ;8 
getInput 触 发 ， 输 入 框 的 内 容 发 生 改 变 ， 当 前 值 为 :88 
getInput 甬 发 ， 输 入 框 的 内 容 发 生 改 变 ， 当 前 值 为 :888 
getInput 触 发 ,输入 框 的 内 容 发 生 改 变 ， 当 前 值 为 :8888 
getInput 触 发 ,输入 框 的 内 容 发 生 改变 ， 当 前 什 为 :88888 
getInput 凶 发 ,输入 框 的 内 容 发 和 改变， 当前 值 为 :888888 
getBlur 能 发 , 文本 框 失 去 了 焦点 ,当前 信 为 :888888 
>| 
(a) 模拟 器 效果 (b) 控制 台 效 果 


图 3.16 input 组 件 小 案例 
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pages/input/input.wxml 文件 代码 如 下 : 


< view class = "demo — box"> 

<view class = "title"> 9. input 小 案例 </view> 

<view class = "title">(1) 文 字 输 入 框 </view> 

< input type = "text" maxlength = "10" placeholder = "这 里 最 多 只 能 输入 10 个 字 " /> 

< view class = "title">(2) 密 码 输入 框 </view> 

< input type = "password" placeholder = "请 输入 密码 " /> 

<view class = "title">(3) 禁 用 输入 框 </view> 

< input disabled placeholder = "该 输入 框 已 经 被 禁用 ”/> 

< view class = "title">(4) 为 输入 框 增加 事件 监听 </view> 

< input bindinput = "getInput” bindblur = "getBlur"” placeholder = "这 里 输入 的 内 容 将 会 被 监 
听 "/> 


</view> 
pages/input/input.js 文件 代码 如 下 : 


Page({ 
getInput: function(e) { 
console. log("getInput 触发 ,输入 框 的 内 容 发 生 改 变 , 当前 值 为 :" + e.detail. value); 
}, 
getBlur: function(e) { 
console. log("getBlur 触发 ,文本 框 失去 了 焦点 , 当前 值 为 :" + e. detail. value); 
}, 
}) 


pages/input/input.wxss 文件 代码 如 下 : 


input { 
margin: 20rpx auto; border: lpx solid silver; 

} 

【代码 讲解 】 本 例 包含 4 个 输入 框 input 组 件 , 分 别 为 最 大 字符 长 度 限时 为 10、 密 码 输 
人 入 框 .禁用 输入 框 以 及 带 有 监听 事件 的 输入 框 。 在 input.wxml 文件 中 前 三 组 分 别 通过 设置 
属性 maxlength、password .disabled 来 实现 效果 ; 第 四 组 通过 属性 bindinput 和 bindfocus 
为 输入 框 增加 当 键 盘 输 入 时 和 失去 焦点 时 所 触发 的 事件 ,并 在 input.js 文件 中 自 定义 两 个 
事件 函数 getInput() 和 getBlur() 。 


Console 控制 台 打印 的 结果 。 
3.4.4 label 

< label > 是 标签 组 件 ,label 组 件 不 会 呈现 任何 效果 ,但 是 可 以 用 来 改进 表单 组 件 的 可 用 
性 。 当 用 户 在 label 元 素 内 点 击 文本 时 ,就 会 触发 此 控件 , 即 当 用 户 选择 该 标签 时 ,事件 会 传 
递 到 和 标签 相关 的 表单 控件 上 .可 以 使 用 for 属性 绑 定 id, 也 可 以 将 控件 放 在 该 标签 内 部 。 
该 组 件 对 应 的 属性 如 表 3.12 所 示 。 


| ss 
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表 3.12 <label> 组 件 属性 
属 性 名 类 型 说 有明 
for String 绑 定 控件 的 id 


注意 : 目前 可 以 绑 定 的 控件 有 < button > < checkbox>、<radio >、< switch >。 
这 里 以 复 选 框 < checkbox > 为 例 , 使 用 < label > 标签 的 for 属性 绑 定 对 应 复 选 框 , 示 例 代 
码 如 下 : 


< checkbox - group > 
< checkbox id = "tiger" value = "tiger" checked= "true" /> 
< label for = "tiger"> 老 虎 </label > 

</checkbox - group > 


也 可 以 使 用 < label > 包裹 < checkbox > 标签 : 


< checkbox - group > 
< label> 
< checkbox value = "tiger" checked = "true"” /> 老虎 
</label> 
</checkbox - group > 


上 述 两 种 做 法 效果 一 样 , 当 用 户 点 击 “ 老 虎 * 内 容 区 域 时 ,< checkbox > 
组 件 均 被 选中 。 

[ 贺 3-10 label 组 件 小 案例 ,运行 效果 如 图 3.17 所 示 。 

pages/label/label.wxml 文件 代码 如 下 : 


<view class = "demo — box"> 
<view class = "title"> 10. label 小 案例 </view > 
<view class = "title">(1) 利 用 for 属性 </view > 
< checkbox - group > 
< checkbox id = "tiger" checked /> 
< label for = "tiger"> 老 虎 </label > 
< checkbox id = "elephant" /> 
< label for = "elephant"> 大 象 </label > 
< checkbox id= "lion" /> 
< label for = "lion"> 狮 子 </label > 
</checkbox - group > 
< view class = "title">(2)label 包 庄 组 件 </view> 
< checkbox - group > 
< label > 
< checkbox checked /> 老虎 
</label > 
< label> 
< checkbox/> 大 象 
</label> 
<label> 
< checkbox/> 狮 子 
</label> 
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</checkbox — group > 
</view> 


pages/label/label.wxss 文件 代码 如 下 : 


checkbox — group { 
margin: 0 80rpx ; 


10.label 小 案例 10.label 小 案例 
(1) 利 用 for 属 性 (1) 利 用 for 属 性 
老虎 大 象 ”狮子 老虎 大 象 ”狮子 
(2)label 包 于 组 件 (2)label 包 庄 组 件 
老虎 ”大 象 ”狮子 老虎 ” 大 象 ”狮子 

(a) “老虎 ”选项 被 默认 选中 (b) 点 击 标签 后 的 效果 


图 3.17 label 组 件 小 案例 


【代码 讲解 】 本 例 在 label.wxml 文件 中 放置 两 组 标签 组 件 , 第 一 组 使 用 for 属性 绑 定 
id, 第 二 组 让 label 包 庄 < checkbox > 组 件 。 

如 图 3.17 所 示 ,两 种 方法 效果 相同 , 当 分 别 单 击 每 个 文字 内 容 后 ,如 果 左边 复 选 框 是 选 
中 状态 ,就 会 变 成 未 选中 状态 ; 如 果 左 边 复 选 框 是 未 选中 状态 ,就 会 变 成 选中 状态 。 


3.4.5 form 


< form > 为 表单 控件 组 件 .用 于 提交 表单 组 件 中 的 内 容 。< form > 控件 组 件 内 部 可 以 答 
套 多 种 组 件 , 具 体 组 件 类 型 如 下 所 示 。 

(1) <input >: 输入 框 组 件 ; 

(2) < button >: 按钮 组 件 ; 

(3) < checkbox >: 复 选 框 组 件 ; 

(4) < switch >: 开关 选择 器 ; 
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(5) <radio >: 单项 框 组 件 ; 

(6) < picker >: 滚动 选择 器 ; 

(7) < slider >: 滑动 选择 器 ; 

(8) < textarea >: 多 行 输入 框 ; 

(9) < label >: 标签 组 件 。 

< form > 控件 组 件 的 属性 如 表 3.13 所 示 。 


表 3.13 < form > 控件 组 件 属性 


属 性 名 类 型 说 明 
report-submit boolean 是 否 返 回 formld 用 于 发 送 模板 消息 
携带 form 中 的 数据 触发 submit 事件 ,event.detail = 二 {value : 
bindsubmit eventhandle 
{'name': 'value'’) , formld: ''} 
bindreset eventhandle 表单 重 置 时 会 触发 reset 事件 


注意 : 当 表单 组 件 < form > 需要 提交 二 级 内 容 表 单 组 件 ( 如 < input >) 的 内 容 时 ,< form > 
组 件 中 需 添加 bindsubmit 事件 ,< button > 组 件 需 添加 form-type 属性 并 赋值 为 submit, 此 
时 的 二 级 内 容 表 单 组 件 (如 < input >) 还 需要 设置 name 属性 。 当 需要 在 用 户 提 交 表 单 之 后 
发 送 模板 消息 时 ,表单 组 件 < form > 需 设置 report-submit 属性 并 赋值 为 true。 
贺 3-11 form 控件 组 件 小 案例 ,运行 效果 如 图 3.18 所 示 。 


11.form 小 案例 L. 
模拟 注册 功能 
用 记名 视频 讲解 
admin 
密码 | 
手机 号 : 
验证 三: 民 | Console Sources Network Securty AppData Audits Sensor Storage Trace 
ee | 加 © | tp | @ Fer Default levels v 
注册 form 发 生 了 submit 事 件 ， 换 带 数 据 为 : 
vf{username: “admwin™, password: “odmin”, phonenumber: “18888888888", code: “123456"} 
code: “123456” 
可 password: “admin” 
phonenumber: “18888888888” 
Username: “admin” 
» : object 
set 事 件 ， 夫 单 已 补 重 时 
» 
(a) 页 面 初始 效果 (b) Console 控 制 台 打 印 的 信息 


图 3.18 form 组 件 小 案例 


pages/form/form.wxml 文件 代码 如 下 : 


< view class = "demo — box"> 
< view class = "title"> 11. form 小 案例 </view> 
<view class = "title"> 模 拟 注 册 功 能 </view> 
< form bindsubmit = "onSubmit" bindreset = "onReset"> 
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< text > 用 户 名 :</text > 
< input name = "username”type = "text" placeholder = "请 输入 你 的 用 户 名 "></input > 
< text > 密码 :</text > 
< input name = "password”type = "password" placeholder = "请 输入 你 的 密码 "> </input > 
< text > 手机 号 :</text > 
< input name = "phonenumber" type = "password" placeholder = "请 输入 你 的 手机 号 "> </input > 
< text > 验证 码 :</text > 
< input name = "code" type = "password”placeholder = "请 输入 验证 码 "></input > 
< button form — type = "submit"> 注 册 </button > 
< button form - type = "reset"> 重 置 </button > 
</form> 


</view> 
pages/form/form.js 文件 代码 如 下 : 


Page({ 
onSubmit(e) { 
console. 1og(" 表 单 被 注册 ") 
console. 1og("fornm 发 生 了 submit 事件 ,携带 数据 为 : "，e. detail. value) 
}, 
onReset() { 
console. log("fornm 发 生 了 reset 事件 ,表单 已 被 重 置 ") 
} 
}) 


pages/form/form.wxss 文件 代码 如 下 : 


input { 
border: 1px solid silver; 
} 
button { 
margin 一 top: 20rpx; 
} 
text { 
font 一 size: 36rpx; 

} 

【代码 讲解 】 本 示例 在 form.wxm 文件 中 放置 一 个 < form > 控件 组 件 , 为 其 绑 定 监听 
事件 bindsubmit 王 "onSubmit" 和 bindreset 王 "onReset" ,用 于 监听 表单 的 提交 和 重 置 。 在 
< form > 控件 组 件 内 部 岩 套 4 个 < input > 组 件 , 设 置 属性 type 二 "text" 以 及 type 王 
"password" 用 于 用 户 名 和 密码 的 输入 。 页 面 底部 放置 两 个 < button > 组 件 ,设置 属 性 form- 
type 一 "submit" 和 form-type 一 "reset" 用 于 提交 和 重 置 表单 ,并 在 form.js 文件 中 自 定义 
onSubmit() 函数 和 onReset() 函数 。 

图 3.18(a) 为 输入 数据 时 模拟 器 的 效果 ; 图 3.18(b) 是 Console 控制 台 打 印 的 注册 信息 
效果 。 
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< picker > 为 滚动 选择 器 ,从 页 面 底部 弹出 供用 户 选择 。 根 据 mode 属性 值 的 不 同 共有 
5 种 选择 器 ,分 别 为 普通 选择 器 、 多 列 选 择 器 .时 间 选 择 器 日 期 选择 器 和 省 市 区 选择 器 。 


1. 普通 选择 器 


当 mode 一 "selector" 时 为 普通 选择 器 效果 ,相关 属性 如 表 3.14 所 示 。 


表 3.14 << picker mode="selector"> 组 件 属 性 


属 性 名 法 型 默认 值 说 明 
range Array/ObjectArray EE mode 为 selector 或 multiSelector 时 ,range 有 效 
当 range 是 一 个 Object Array 时 ,通过 range-key 来 指 

wn bs 定 Object 中 key 的 值 作为 选择 器 显示 内 容 
value number 0 表示 选择 了 range 中 的 第 几 个 (下 标 从 0 开始 ) 

value 改变 时 触发 change 事件 ,event.detail = {value: 
bindchange eventhandle 

value} 

disabled boolean false 是 否 禁 用 
bindcancel eventhandle 取消 选择 或 点 遗 竺 层 收 起 picker 时 触发 


2. 多 列 选择 器 


当 mode 二 "multiSelector" 时 为 多 列 选择 器 效果 ,其 属性 如 表 3.15 所 示 。 


表 3.15 < picker mode 二 "multiSelector"> 组 件 属性 


属 性 名 类 型 默认 值 说 明 
range Array/ObjectArray [J mode 为 selector 或 multiSelector 时 ,range 有 效 
. 当 range 是 一 个 Object Array 时 ,通过 range-key 
和 i 来 指定 Object 中 key 的 值 作为 选择 器 显示 内 容 
value number 0 表示 选择 了 range 中 的 第 几 个 (下 标 从 0 开始 ) 
value 改变 时 触发 change 事件 , event. detail 一 
bindchange eventhandle 
{value: value} 
bindcolumnchange | eventhandle 列 改变 时 触发 
3. 时 间 选 择 器 


当 mode 二 "time" 时 为 时 间 选 择 器 效果 ,其 属性 如 表 3.16 所 示 。 


表 3.16 ”< picker mode 一 "time"> 组 件 属性 


属 性 名 类 型 默认 值 说 明 
li 本 表示 选中 的 时 间 , 格 式 为 "hh:mm" 
start string 表示 有 效 时 间 范 围 的 开始 ,字符 串 格式 为 "hh:mm" 
end string 表示 有 效 时 间 范 围 的 结束 ,字符 串 格式 为 "hh:mm" 
bindchange eventhandle value 改变 时 触发 change 事件 ,event.detail 二 {value} 
bindcolumnchange | eventhandle 列 改 变 时 触发 
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4. 日 期 选择 器 
当 mode 一 "date" 时 为 日 期 选择 器 效果 ,其 属性 如 表 3.17 所 示 。 


表 3.17 < picker mode 二 "date"> 组 件 属性 


属性 名 | 类 型 默认 值 说 有明 

value string 0 表示 选中 的 日 期 ,格式 为 "YYYY-MM-DD" 

Start String 表示 有 效 日 期 范围 的 开始 ,字符 串 格式 为 "YYYY-MM-DD" 
end String 表示 有 效 日 期 范围 的 结束 ,字符 串 格式 为 "YYYY-MM-DD" 
fields string day 有 效 值 year,month,day, 表 示 选 择 器 的 粒度 

bindchange | eventhandle value 改变 时 触发 change 事件 ,event.detail 二 {value} 


5. 省 市 区 选择 器 
当 mode 一 "region" 时 为 省 市 区 选择 器 效果 ,其 属性 如 表 3.18 所 示 。 


表 3.18 < picker mode 二 "region"> 组 件 属性 


属 性 名 类 型 默认 值 说 明 
value array 口 表示 选中 的 省 市 区 ,默认 选中 每 一 列 的 第 一 个 值 
custom-item | string 可 为 每 一 列 的 顶部 添加 一 个 自 定 义 的 项 
value 改变 时 触发 change 事件 ,event.detail 二 {value，code， 
bindchange | eventhandle postcode) ,其 中 字段 code 是 统计 用 区 划 代 码 , postcode 是 邮 
政 编码 


贺 3-12 picker 组 件 小 案例 ,运行 效果 如 图 3.19 所 示 。 
pages/picker/picker.wxml 文件 代码 如 下 : 


< view class = "demo - box"> 
< view class = "title"> 12. 表 单 组 件 picker 的 简单 应 用 </view> 视频 讲解 
<view class = "title">(1) 普 通 选 择 器 </view> 
< picker mode = "selector" range = "{{oneItems}}" bindchange = "selectorChange"> 
< view> 当 前 选择 : {{selector}}</view> 
</picker > 
< view class = "title">(2) 多 列 选择 器 </view> 
< picker mode = "multiSelector”range = "{{doubleItems}}" 
bindchange = "multiSelectorChange"> 
< view> 当 前 选择 : {{multiSelector}}</view> 
</picker > 
< view class = "title">(3) 时 间 选 择 器 </view> 
< picker mode = "time" bindchange = "timeChange"> 
< view> 当 前 选择 : { {time}}</view> 
</picker> 
< view class = "title">(4) 日 期 选择 器 </view> 
< picker mode = "date" bindchange = "dateChange"> 
< view> 当 前 选择 : {{date}}</view> 
</picker> 
< view class = "title">(5) 省 市 区 选择 器 </view> 
< picker mode = "region" bindchange = "regionChange"> 
<view> 当 前 选择 : {{region}}</view> 
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12 .表单 组 件 picker 的 简单 应 用 

(1 普通 选择 器 

当前 选择 - 
人 多 列 选择 器 

当前 选择 - 
(3) 时 间 选 择 器 

当前 选择 
全 日 期 选择 器 


12 表单 组 件 picker 的 简单 应 用 

(1 普通 选择 器 

当前 选择 - 
人 多 列 选择 器 

当前 选择 - 
(3) 时 间 选 择 器 

当前 选择 - 
(9 日期 选择 器 


Ra 于 二 古城 


12 表单 组 件 picker 的 简单 应 用 

(1) 癌 画 先 择 器 

当前 选择 
(2) 多 列 选择 器 

当前 选择 
G) 时 间 选 择 器 

当前 选择 
(日 期 选择 器 


03 o2 


选择 器 


(a) 普 j 


(b) 单 击 多 列 选择 器 


12 表单 组 件 picker 的 简单 应 用 
(1 普通 选 择 器 
当前 选择 : 
人) 多 列 选择 器 
当前 选择 : 
G) 时 间 选 择 器 
当前 选择 : 
(日 期 选择 器 


2019 年 04 月 25B 


12 表单 组 件 picker 的 简单 应 用 

(1 普通 选择 器 

当前 选择 : 
(多 列 选 择 器 

当前 选择 : 
(3) 时 间 选 择 器 

当前 选择 
(4) 日 期 选择 器 


(c) 时 间 选 择 器 


12. 表 单 组 件 picker 的 简单 应 用 

(1T) 普 通 选择 器 

当前 选择 : 大 象 
(2) 多 列 选 择 器 

当前 选择 : 洞庭 湖 ,平遥 古城 泰山 
(3) 时 间 选 择 器 

当前 选择 : 03:02 
(4) 日 期 选择 器 

当前 选择 : 2019-04-25 
(5) 省 市 区 选择 器 

当前 选择 : 广东 省 ,广州 市 天 河 区 


(d) 日 期 选择 器 


</picker> 
</view> 


(e) 省 市 区 选择 器 


图 3.19 picker 组 件 小 案例 


pages/picker/picker.js 文件 代码 如 下 : 


Bage({ 
// 页 面 的 初始 数据 
data: { 


oneItems: [ "3 


doubleTtems: [ 


虎 "，" 大 象 "，" 狮 子 "]， 


(人 ) 选择 器 确定 区 域 后 的 效果 


5 


开发 从 入 门 到 实战 * 微 课 视频 版 


[" 千 岛 湖 ", "洞庭 湖 ", "玄武 湖 "], 
[" 鼓 浪 屿 "," 平 瑰 古 城 "," 坝 上 草原 "]， 
[" 泰 山 ", "黄山",“" 华 山 "] 
] 
}, 
selectorChange: function(e) { 


var i = e.detail.value; // 获 得 数组 的 下 标 
var value = this. data. oneItems[i]; // 获 得 选项 的 值 
this. setData({ 
selector: value // 将 用 户 选 择 的 值 更 新 赋 给 selector 


D); 
ls 
multiSelectorChange: function(e) { 


var arrayIndex = e.detail.value; // 获 得 数组 的 下 标 

var value = new Array(); // 声 明 一 个 空 数组 ,用 于 存放 用 户 选 择 的 值 

for (var i = 0; i< arrayIndex. length; i++) { 
var m = arrayIndex[i]; // 通 过 数组 的 遍历 ,获得 第 i 个 数组 元 素 的 下 标 
varn = this.data. doubleItems[i][m]; // 获 得 第 i 个 数组 的 元 素 值 
value. push(n); // 往 数组 中 追加 新 的 值 


} 
this. setData( { 
multiSelector: value // 将 用 户 选择 的 值 更 新 赋 给 multiSelector 
]) 
a 
timeChange: function(e) { 


var value = e.detail.value; // 获 得 选择 的 时 间 
this. setData( { 
time: value // 将 用 户 选择 的 值 更 新 赋 给 time 


]) 7 
} 
dateChange: function(e) { 


var value = e.detail.value; // 获 得 选择 的 日 期 
this. setData( { 
date: value // 将 用 户 选 择 的 值 更 新 赋 给 date 


}); 
}, 
regionChange: function(e) { 


var value = e.detail.value; // 获 得 选择 的 省 市 区 
this. setData( { 
region: value // 将 用 户 选择 的 值 更 新 赋 给 region 


]) 7 
}, 

}) 

【代码 讲解 】 本 示例 在 picker.wxml 文件 中 设置 了 5 组 不 同 效果 的 选择 器 ,分 别 为 普 
通 选择 器 、 多 列 选择 器 .时 间 选 择 器 .日 期 选择 器 和 省 市 区 选择 器 。 在 普通 选择 器 中 设置 属 
性 mode 王 "selector" 并 为 绑 定 监听 事件 ,在 JS 文件 中 自 定义 选项 数组 和 本 数 selectorChange() ， 
在 wxml 文件 中 通过 {{selector 上 动态 获取 用 户 选 择 的 内 容 ; 在 多 列 选择 器 中 设置 属性 
mode 一 "selector" 并 为 组 件 绑 定 监 听 事 件 , 在 JS 文件 中 自 定 义 选项 数组 和 函数 
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multiSelectorChange() ,在 WXML 文件 中 通过 {{mnultiSelector})} 动态 获取 用 户 选择 的 内 
容 ; 在 时 间 选 择 器 中 设置 属性 mode= "time" 并 为 组 件 绑 定 监听 事件 ,在 JS 文件 中 自 定义 函 
数 timeChange() ,在 WXML 文件 中 通过 {{time} } 动 态 获取 用 户 选择 的 时 间 ; 在 日 期 选择 器 中 
设置 属性 mode 王 "date" 并 为 组 件 绑 定 监听 事件 ,在 JS 文件 中 自 定义 函数 dateChange() ,在 
WXML 文件 中 通过 {{date) } 动 态 获 取 用 户 选择 的 日 期 ; 在 省 市 区 选择 器 中 设置 属性 mode 一 
"region "并 为 组 件 绑 定 监听 事件 ,在 JS 文件 中 自 定 义 函 数 regionChange() ,在 WXML 文件 
中 通过 {{region} 动态 获取 用 户 选择 的 地 区 。 


3.4.7 picker-view 


< picker-view > 是 内 入 页 面 的 滚动 选择 器 ,其 中 只 可 放置 picker-view-column 组 件 ,其 
属性 如 表 3.19 所 示 。 
表 3.19 < picker-view > 组 件 属性 


属 性 名 类 型 默认 值 说 明 
数组 中 的 数字 依次 表示 picker-view 内 的 picker-view- 
value Array.< number > 口 column 选择 的 第 几 项 (下 标 从 0 开始 ), 数 字 大 于 
picker-view-column 可 选项 长 度 时 ,选择 最 后 一 项 
indicator-style | string 设置 选择 器 中 间 选 中 框 的 样式 
indicator-class | string 设置 选择 器 中 间 选 中 框 的 类 名 
mask-style String 设置 蒙 层 的 样式 
mask-class string 设置 蒙 层 的 类 名 
滚动 选择 时 触发 change 事件 , event. detail 一 
bindchange eventhandle {value) ; value 为 数组 ,表示 picker-view 内 的 picker- 
view-column 当前 选择 的 是 第 几 项 (下 标 从 0 开始 ) 


贺 3-13 ”picker-view 组 件 小 案例 ,运行 效果 如 图 3.20 所 示 。 
pages/picker-view/picker-view.wxml 文件 代码 如 下 : 


< view class = "demo — box"> 
< view class = "title"> 13. picker - view 小 案例 </view> 
<view class = "title"> 旅 游 计划 </view> 
< view class = "title">{ {travel} }</view > 
< picker - view value = "{{value}}" bindchange = "pickerviewChange"> 
<picker— view -column > 
< view wx:for = "{{touristone}}">{{item} }</view> 
</picker - view — column> 


<picker — view 一 column > 
< view wx:for ="{{touristtwo} }">{{item} }</view > 
</picker - view — column > 
< picker — view — column > 
<view wx:for="{{touristthree}}">{{item} }</view> 
</picker - view — column > 
</picker - view> 
</view> 
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pages/picker-view/picker-view.js 文件 代码 如 下 : 


Bage({ 
// 页 面 的 初始 数据 
data: { 
touristone: [" 五 台山 "，" 普 陀 山 "，" 峨 眉山 "] ， 
touristtwo: [" 莫 高 富 "，" 云 冈 石窟 "，" 龙 门 石窟 "] ， 
touristthree: [ "法门 村 "，" 佛 光 寺 ",，" 大 相国 寺 "],， 


value: [0, 0, 0], // 设 置 默 认 的 每 个 选项 的 数组 下 标 
}, 
Nt 
varv = e.detail.value; // 获 得 数组 的 下 标 
var travel = []; // 声 明 一 个 空 数组 ,用 于 存放 用 户 选择 的 值 


travel. push(this. data. touristone[v[0]]); // 追 加 用 户 选择 第 一 个 数组 的 元 素 
travel. push(this. data. touristtwo[v[1]]); // 追 加 用 户 选 择 第 二 个 数组 的 元 素 
travel. push(this. data. touristthree[v[2]]);// 追 加 用 户 选 择 第 三 个 数组 的 元 素 
this. setData({ 

travel: travel // 将 用 户 选择 的 值 更 新 赋 给 travel 
]) 

}, 
}) 


pages/picker-view/picker-view.wxss 文件 代码 如 下 : 


picker — view { 
width: 100 %; 
height: 400rpx; 
} 


13.picker-view 小 率 例 13.picker-view 小 案例 
旅游 计划 旅游 计划 
五 台山 , 云 冈 石 写 ,佛光 寺 


五 台山 。 莫 高 定 ”法门 寺 


五 台山 云 冈 石 写 ”佛光 寺 


(a) 页 面 初始 效果 (b) 更 改 后 的 效果 
图 3.20 picker-view 组 件 小 案例 
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【代码 讲解 】 < picker-view-column > 组 件 是 < picker-view > 组 件 的 二 级 组 件 , 本 例 中 
picker-view.wxml 文件 < picker-view > 组 件 包含 了 3 个 < picker-view-column > 组 件 ,分 别 用 
于 泻 染 3 个 景点 。< picker-view > 组 件 和 < picker > 组 件 可 以 达到 同样 的 表现 效果 ,读者 可 以 
根据 自己 的 喜好 选择 使 用 。 

图 3.20(a) 为 页 面 初始 效果 ; 图 3.20(b) 为 用 户 选 择 完 每 个 选项 后 ,内 容 会 显示 在 旅游 
计划 下 方 。 


3.4.8 radio 


< radio > 为 单 选 框 组 件 , 往 往 需要 配合 < radio-group > 组 件 来 使 用 , < radio > 标签 峙 套 
在 < radio-group > 当中 。< radio-group > 组 件 只 有 一 个 属性 ,如 表 3.20 所 示 。 
表 3.20 < radio-group > 组 件 属性 
属 性 名 类 型 说 明 备 注 


<radio-group > 选中 项 发 生变 化 时 
bindchange eventhandle 触发 change 事件 , event. detail = 
{value: 选 中 项 radio 的 value} 


携带 值 为 vent. detail 一 {value: 
选中 项 radio 的 value} 


< radio > 组 件 的 属性 如 表 3.21 所 示 。 
表 3.21 < radio > 组 件 属性 


属 性 名 类 型 默认 值 说 明 
本 cig <radio > 标识 。 当 该 < radio > 选中 时 ,< radio-group > 的 
change 事件 会 携带 < radio > 的 value 
checked boolean false 当前 是 否 选 中 
disabled boolean false 是 否 禁 用 
color color radio 的 颜色 . 同 css 的 color 
示例 代码 如 下 : 


< radio - group > 
< radio value = "tiger" checked = "true"> 老 虎 </radio > 
< radio value = "elephant" disabled = "true"> 大 象 </radio> 
< radio value = "lion"> 狮 子 </radio > 
< radio value = "penguin"> 企 鹅 </radio> 
</radio - group > 


其 效果 如 图 3.21 所 示 。 人 @ 志 虎 国 大 象 “ 狮子 企 瑞 
如 图 3.21 所 示 ,“ 老 虎 ” 选 项 被 选中 .“ 大 象 ”选项 禁止 选 - 
择 ,“ 狮 子 " 和 “企鹅 "选项 均 未 选中 。< radio-group > 组 件 不 。 图 21 单 选 框图 示 
允许 多 选 ,当前 状态 有 且 仅 有 一 个 选项 被 选中 , < checkbox-group > 组 件 允 贺卡 罗 
许 用 户 多 选 。 3 
[ 圆 3-14 radio 组 件 小 案例 ,运行 效果 如 图 3.22 所 示 。 
pages/radio/radio.wxml 文件 代码 如 下 : 视频 讲解 
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<view class = "demo - box"> 
< view class = "title"> 14. radio 小 案例 </view> 
<view class = "title"> 利 用 for 循环 批量 生成 </view> 
< radio - group bindchange = "radioChange"> 
<block wx:for = "{{radioItems}}"> 
< radio value = "{{ item. name}}" checked = "{{ item. checked}}" />{{item. value}} 
</block> 
</radio - group > 
</view> 


14.radio 小 案例 
利用 for 循 环 批量 生成 


老虎 
大 多 
© 
企 路 
亡 唐 
天 入 


[EY Console Sources Network Security 
© twp 了 | 四 | hner 


radio 发 生 change 事 件 ， 携 带 value 值 为 : penguin 
radio 发 生 change 事 件 ， 携 带 value 值 为 : elk 


(a) “狮子 ”选项 被 选中 (b) 新 选项 被 选中 时 Console 控 制 台 输 出 的 内 容 
图 3.22 radio 组 件 小 案例 


pages/radio/radio.js 文件 代码 如 下 : 


Page({ 
data: { 
radioItems: [ 
{ name: 'tiger'，value: ' 老 虎 ' }， 
: "elephant'，value: ' 大 象 ' }， 
lion',，value: ' 狮 子 ',，checked: 'true' } ， 
{ name: 'penguin'，value: ' 企 牧 ' }， 
{ name: 'elk',value: ' 康 应 ' }， 
{ name: 'swan'，value: ' 天 鹅 ' }， 
] 
}, 
radioChange: function(e) { 
console. log("radio 发 生 change 事件 ,携带 value 值 为 : "，e. detail. value) 
# 
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]) 
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pages/radio/radio.wxss 文件 代码 如 下 : 


radio— group { 


margin: 0 200rpx; 


} 


【代码 讲解 】 


本 例 首先 在 radio.js 文件 中 的 data 中 定义 一 个 数组 radioitems ,用 于 记录 


单 选 框 的 名 称 name、 值 value 及 选中 情况 ,并 在 radio.wxml 文件 中 使 用 < radio-group > 标签 包 
里 < radio >, 使 用 < label > 标签 配合 wx: for 实现 批量 生成 多 个 radio 组 件 ; 其 次 在 
< radio-group > 标签 上 绑 定 监听 事件 ,在 radio.js 文件 中 自 定义 checkboxChange() 函数 ,以 
达到 每 次 被 触发 后 都 在 Console 控制 台 输 出 最 新 选中 的 所 有 值 。 图 3.22(a) 为 模拟 器 效果 ; 
图 3.22(b) 为 控制 台 效 果 。 


3.4.9 slider 


< slider > 为 滑动 选择 器 ,用 于 可 视 化 地 动态 改变 某 变量 的 取 值 。 其 属性 如 表 3.22 所 示 。 
表 3.22 < slider > 组 件 属 性 


属 性 名 类 型 默认 值 说 明 

min number 0 最 小 值 
max number 100 最 大 值 
step number h 步 长 , 取 值 必须 大 于 0, 并且 可 被 (max 一 min) 整 除 
disabled boolean false 是 否 禁 用 
value number 0 当前 取 值 
color color 井 e9eg9e9 | 背景 条 的 颜色 (使 用 backgroundColor) 
selected-color color 井 laad19 | 已 选择 的 颜色 (使 用 activeColor) 
backgroundColor color 井 ege9e9 | 背景 条 的 颜色 
block-size number 28 滑 块 的 大 小 , 取 值 范围 为 12 一 28 
block-color color # {fffff 滑 块 的 颜色 
show-value boolean false 是 否 显示 当前 value 

完成 一 次 拖 动 后 触发 的 事件 ,event. detail 二 {value: 
bindchange eventhandle 

value} 

bindchanging eventhandle 拖 动 过 程 中 触发 的 事件 ,event.detail = {value: value} 


例如 ,设置 一 个 自 定义 滑动 条 ,最 小 值 为 10、 最 大 值 为 100, 在 右 侧 显示 当前 数值 ,示例 


代码 如 下 : 


< slider min= "10" max = "100" show - value /> 


其 运行 效果 如 图 3.23 所 示 。 


图 3.23 滑动 条 图 示 
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滑动 条 上 的 滑 块 向 右边 滑动 时 , 右 侧 的 数值 会 


[ 圆 3-15 slider 组 件 小 案例 ,运行 效果 如 图 3.24 所 示 。 


pages/slider/slider.wxml 文件 代码 如 下 : 


< view class = "demo - box"> 
< view class = "title"> 14. slider 小 案例 </view> 
<view class= "title">(1) 滑 动 条 右 侧 显 示 当 前 进 
< slider mi 


逐渐 增 大 。 


视频 讲解 


度 值 </view> 


max= "100" value = "30" step= "10" show— value= "true" /> 


<view class = "title">(2) 自 定义 滑动 条 颜色 与 滑 块 样式 </view> 


< slider min = "0”max ="100”value = "30" 
activeColor = "skyblue" /> 
title">(3) 禁 用 滑动 条 </view> 


<view class= 


<slider min= 


<view class= 


<slider min= 
</view> 


15.slider 小 案例 
(1) 滑 动 条 右 侧 显示 当前 进度 值 
es 50 
(2) 自 定义 滑动 条 颜色 与 滑 块 样式 
® 
(3) 禁 用 滑动 条 


(4) 增 加 滑动 条 监听 事件 


(a) 页 面 初始 效果 


block - size = "20" block - color = " gray" 


max= "100" value = "30" disabled = "true" /> 
title">(4) 增 加 滑动 条 监听 事件 </view> 
max= "100" value = "30" bindchange = "sliderChange" /> 


Console = Sources Network Security 


© tp YI® fiter 
slider 触 发 sliderChange 事 件 ， 携带 value 什 为 ; 
slider 触 发 sliderChange 事 件 ， 携带 value 什 为 : 
slider 触 发 sliderChange 事 件 ， 携带 value 值 为: 
slider 触 发 sliderChange 事 件 ， 携带 value 什 为: 
slider 触 发 sliderChange 事 件 ， 携 带 value 值 为 ; 
slider 触 发 sliderChange 事 件 ， 携 带 value 值 为 ; 


(b) Console 控 制 台 打印 的 slider 变 化 


图 3.24 slider 组 件 小 案例 


pages/slider/slider.js 文件 代码 如 下 : 


Bage({ 
sliderChange(e) { 


console. log("slider 触发 sliderChange 事件 ,携带 value 值 为 : ”+ e. detail.value) 


} 
}) 
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【代码 讲解 】 本 例 在 slider.wxml 文件 中 设置 4 种 情况 ,分 别 为 滑动 条 右 侧 显示 当前 进度 
值 . 自 定义 滑动 条 颜色 和 滑 块 样式 禁用 滑动 条 (无 法 改变 当前 数值 ) 增加 滑动 条 监听 事件 。 

图 3.24(a) 是 页 面 初始 状态 ,第 4 个 滑动 条 为 其 滑 块 增加 监听 事件 并 在 slider.js 文件 中 
自 定义 函数 ; 图 3.24(b) 所 示 , 当 第 4 个 滑动 条 被 拖 动 时 ,会 在 Console 控制 台 上 输出 slider 
的 最 新 值 。 


3.4.10 switch 


< switch > 为 开关 选择 器 ,常用 于 表单 上 的 开关 功能 ,其 属性 如 表 3.23 所 示 。 
表 3.23 < switch > 组 件 属性 


属 性 名 类 型 默认 值 说 明 
checked boolean false 是 否 选 中 
disabled boolean false 是 否 禁用 
type string switch | 样式 ,有 效 值 : switch, checkbox 
bindchange eventhandle value 改变 时 触发 change 事件 ,event.detail = {value: value} 
color color switch 的 颜色 , 同 CSS 的 color 

示例 代码 如 下 : 

< switch checked = "true" /> 选中 

< switch/> 未 选中 

@) 圳 没 选 中 


其 运行 效果 如 图 3.25 所 示 。 

当 按钮 在 右边 时 为 选中 状态 , 当 按 钮 在 左边 时 为 未 选中 图 3.25 开关 图 示 
状态 。 

[ 贺 3-16 switch 组 件 小 案例 ,运行 效果 如 图 3.26 所 示 。 

pages/switch/switch.wxml 文件 代码 如 下 : 


< View class = "demo - box"> 
< view class = "title"> 16. swtich 小 案例 </view> 
< view class = "title"> 增 加 switch 事件 监听 </view> 
< switch checked bindchange = "switchlChange"></switch> 
< switch bindchange = "switch2Change"></switch> 
</view> 


pages/switch/switch.js 文件 代码 如 下 : 


Page({ 
switchlChangel: function(e) { 
console. log("switchl 触发 switchlChange 事件 ,携带 value 值 为 : " + e. detail. value) 
}, 
switch2Change2: function(e) { 
console. log("switch2 触发 switch2Change 事件 ,携带 value 值 为 : ”+ e. detail. value) 
} 
D) 
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a 42 ‘0% 
去 人 .加 
16.switch 小 案例 
增加 switch 事 件 监听 


@ 


Console Sources Network Security 


四 @ tp v|I® | Fiher 
switch1 触 发 switchlChange 事 件 ， 携 带 value 值 为 ; 
switch2 触 发 switch2Change 事 件 ， 扒 带 value 值 为 : 
switch2 触 发 switch2Change 事 件 ， 携 带 value 值 为 : 


switch1 触 发 switch1Change 事 件 ， 携 带 value 值 为 : 
> 


(a) 页 面 初始 效果 (b) Console 控 制 台 输出 的 switch 状 态 变化 
图 3.26 switch 组 件 小 案例 

【代码 讲解 〗】 本 例 在 switch.wxml 文件 中 放置 两 组 < switch > 标签 ,第 1 组 设置 属性 
checked 实现 选中 状态 ,第 2 组 默认 为 未 选中 状态 ,并 为 两 个 组 件 分 别 绑 定 监听 事件 ; 在 
switch.js 文件 中 自 定 义 switchl1Change() 隐 数 和 switch2Change() 函 数 , 当 switch 组 件 被 触 
发 后 会 在 Console 控制 台 输 出 当前 状态 。 

图 3.26(a) 为 页 面 初始 效果 图 ; 图 3.26(b) 为 Console 控制 台 输 出 当前 两 组 switch 的 选 
中 状态 。 


3.4.11 textarea 


< textarea > 为 多 行 输入 框 ,常用 于 多 行文 字 的 输入 。 其 属性 如 表 3.24 所 示 。 
表 3.24 < textarea > 组 件 属性 


属 性 名 类 型 默 认 值 说 明 
value string 输入 框 的 内 容 
placeholder string 输入 框 为 空 时 占 位 符 
指定 placeholder 的 样式 ,目前 仅 支 持 color、 
placeholder-style | string switch 2 
font-size 和 font-weight 
placeholder-class | string textarea-placeholder | 指定 placeholder 的 样式 类 
disabled boolean false 是 否 禁 用 
最 大 输入 长 度 ,设置 为 一 1 的 时 候 不 限制 最 
maxlength number 140 大 长 度 
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续 表 
属 性 名 类 型 默 说 明 
auto-focus boolean false 自动 聚焦 , 拉 起 键盘 
focus boolean false 获取 焦 
是 否 自动 增高 ,设置 auto-height 时 , style 
auto-height boolean false 
.height 不 生效 
Rd es jls 如 果 textarea 是 在 一 个 position: fixed 的 区 
0 ee 和 域 ,需要 显示 指定 属性 fixed 为 true 
指定 光标 与 键盘 的 距离 ,单位 : px( 基 础 库 
ee 2.4.0 起 支持 )。 取 textarea 底部 的 距离 和 
cursor-spacing number/string cursor-spacing 指定 的 距离 的 最 小 值 作为 光 
标 与 键盘 的 距离 
cursor number 指定 focus 时 的 光标 位 置 (基础 库 1.5.0 起 支持 ) 
show- les 是 否 显 示 键 盘 上 方 带 有 “完成 "按钮 那 一 栏 
confirm-bar hs 者 (基础 库 1.6.0 起 支持 ) 
A 有 光标 起 始 位 置 ,自动 聚集 时 有 效 , 需 与 
ee ee selection-end 搭配 使 用 (基础 库 1.9.0 起 支持 ) 
selection-end number 一 盐 本 入 来 位 轩 自 动 沫 各 时 有 效 1 备 写 
selection-start 搭配 使 用 (基础 库 1.9.0 起 支持 ) 
E 2 键盘 弹 起 时 ,是 否 自动 上 推 页 面 (基础 库 
adjust-position boolean true 


1.9.0 起 支持 ) 


bindfocus 


eventhandle 


输入 框 聚焦 时 触发 , event. detail == { value， 
height) ,height 为 键盘 高 度 ( 基 础 库 1.9.0 起 
支持 ) 


bindblur 


eventhandle 


输入 框 失 去 焦点 时 触发 , event. detail 一 


{value, cursor} 


bindlinechange 


eventhandle 


输入 框 行 数 变化 时 调用 , event. detail 一 
{height: 0 heightRpx: 0, lineCount: 0} 


bindinput 


eventhandle 


当 键 盘 输 入 时 ,触发 input 事件 , event 
.detail = {value, cursor, keyCode}, keyCode 
为 键 值 .目前 工具 还 不 支持 返回 keyCode 参 
数 。bindinput 处 理 函 数 的 返回 值 并 不 会 反 
上 映 到 textarea 上 


bindconfirm 


加 3-17 


eventhandle 


textarea 组 件 小 案例 ,运行 效果 如 图 3.27 所 示 。 
pages/textarea/textarea.wxml 文件 代码 如 下 : 


<view class = "demo - box"> 


<view class = "title"> 17. textarea 小 案例 </view> 
<view class = "title">(1) 文 本 框 自动 变 高 </view> 


点 击 完成 时 , 触发 confirm 事件 , event 


.detail = {value: value} 
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< textarea auto - height placeholder = "允许 自动 变 高 " /> 

< view class = "title">(2) 禁 用 文本 框 </view> 

< textarea placeholder = "禁用 该 文本 框 无 法 输入 内 容 " disabled/> 

<view class = "title">(3) 自 定义 占 位 符 样式 </view> 

< textarea placeholder = " 占 位 符 颜色 是 天 蓝 色 并 加 粗 ”placeholder - style = "color: skyblue; 
font - weight :bold" /> 


</view> 


PO) ES ». © 
17.textarea 小 案例 17.textarea 小 案例 
(1) 文 本 框 自动 变 高 (1) 文 本 框 自动 变 高 
允许 自动 变 高 各 澡 eo | 
| 目 : 指定 实施 新 时 期 “互联 网 +” 行 | 
() 茜 用 文本 杠 动 、 实 施 数 字 经 济 、 “百联 网 +” 重 | 
禁用 该 文本 框 无 法 输入 内 容 大 工程 、 建 设 人 工 智能 创新 应 用 先导 
区 、 持 续 推进 大 数据 综合 实验 区 建 | 
设 ， | | 
高 ) 
(2) 禁 用 文本 框 
车 用 文本 框 无 法 给 入 内 容 
(3) 自 定义 占 位 符 样式 
(3) 自 定义 占 位 符 样式 
(a) 页 面 初始 效果 (b) 第 一 组 文本 框 在 输入 的 内 容 超过 一 行 时 自动 变 高 


图 3.27 textarea 组 件 小 案例 


【代码 讲解 】 本 例 在 switch.wxml 文件 中 放置 3 组 < textarea > 标签 : 第 1 组 通过 设置 
属性 auto-height, 允许 文本 框 在 输入 内 容 超过 一 行 时 自动 变 高 ; 第 2 组 通过 设置 属性 
disabled, 文 本 框 被 禁用 无 法 进行 输入 ; 第 3 组 通过 设置 属性 “color: skyblue; font-weight: 
bold”, 使 文本 框 中 的 占 位 符 旦 现 天 蓝 色 并 加 粗 。 

图 3.27(a) 为 页 面 初始 效果 ; 图 3.27(b) 中 第 1 组 文本 框 在 输入 的 内 容 超 过 一 行 时 , 文 
本 框 高 度 会 自动 发 生变 化 ,第 2 组 文本 框 被 禁 ,第 3 组 文本 框 的 占 位 符 样 式 发 生 改变 。 


3.5 导航 组 件 


< navigator > 导航 组 件 用 于 页 面 之 间 的 跳 转 ,是 使 用 频繁 的 组 件 之 一 。 其 属性 如 
表 3.25 所 示 。 
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表 3.25 < navigator > 组 件 属性 


属 性 名 类 型 默认 值 说 明 

target string self 是 在 哪个 目标 上 发 生 跳 转 ,默认 为 当前 小 程序 
url string false 当前 小 程序 内 的 跳 转 链接 

open-type navigate switch 跳 转 方式 


其 中 ,open-type 属性 对 应 6 种 取 值 。 其 属性 如 表 3.26 所 示 。 


表 3.26 open-type 属性 


属 性 名 说 有明 

navigate 对 应 wx.navigateTo 或 wx.navigateToMiniProgram 的 功能 
redirect 对 应 wx.redirectTo 的 功能 

switchTab navigate 跳 转 方式 

reLaunch 对 应 wx.reLaunch 的 功能 

navigateBack 对 应 wx.navigateBack 的 功能 

exit 退出 小 程序 ,target 二 "miniProgram" 时 生效 


加 3-18 navigator 组件 小 案例 ,运行 效果 如 图 3.28 所 示 。 
pages/navigator/navigator.wxml 文件 代码 如 下 : 


< view class = "demo - box"> 
< view class = "title"> 18. 导航 组 建 navigator 小 案例 </view> 
<view class = "title">(1) 点 击 打开 新 页 面 </view> 视频 讲解 
< navigator url = "../new/new" open— type = "navigate"> 
< button type= "primary"> 点 击 按钮 跳 转 到 新 页 面 </button > 
</navigator > 
< view class = "title">(2) 点 击 重 定向 到 新 页 面 </view> 
< navigator url = "../redirect/redirect”open - type = "redirect"> 
< button type= "primary"> 点 击 按钮 跳 转 到 当前 页 面 </button > 
</navigator > 


</view> 


在 app.js 文件 中 通过 pages/new/new、pages/redirect/redirect 注册 两 个 新 页 面 。 

pages/new/new.wxml 文件 代码 如 下 : 

< text > 这 里 是 新 窗口 打开 的 新 页 面 ,点 击 左 上 角 图 标 可 以 返回 上 一 页 </text > 

pages/redirect/redirect.wxml 文件 中 代码 如 下 : 

< text > 重 定向 的 新 页 面 , 无 法 返回 到 navigator. wxml 页 面 </text > 

【代码 讲解 】 本 例 创 建 3 个 页 面 : navigator 页 面 是 项 目 首页 ; new 和 redirect 页 面 是 
navigator 页 面 中 两 种 不 同 的 跳 转 方式 的 着 陆 页 。 

图 3.28(a) 为 页 面 初始 效果 ; 图 3.28(b) 页 面 利用 openrtype 一 "navigate "方式 跳 转 而 
来 ,着 陆 页 左上 角 的 返回 图 标 可 以 返回 上 一 页 ; 图 3.28(c) 页 面 由 open-type 一 "redirect" 方 
式 跳 转 而 来 ,着 陆 页 左上 角 没 有 返回 图 标 。 
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里 是 新 窗口 打开 的 新 页 面 ， 点 击 左上 角 图 权重 定向 的 新 页 面 ， 无 法 返回 到 
18 导航 组 建 navigator 小 案例 可 以 加 上 一 页 Inavigator.wxm| 页 面 


(T) 点 击 打开 新 页 面 


点 击 按钮 姨 转 到 新 页 面 


(点 击 重 定向 到 新 页 面 


点 击 按钮 跳 转 到 当前 页 面 


(a) 页 面 初始 效果 (b) 点 击 第 1 个 按钮 跳 转 到 新 页 面 〈c) 点 击 第 2 个 按钮 在 当前 页 打开 
图 3.28 ”navigator 组 件 小 案例 


3.6 媒体 组 件 


媒体 组 件 用 于 播放 媒体 内 容 , 常 用 的 有 音频 组 件 、 图 片 组 件 和 视频 组 件 。 
3.6.1 audio 


< audio > 为 音频 组 件 , 用 于 网 络 音 频 的 播放 。 其 属性 如 表 3.27 所 示 。 
表 3.27 < audio > 组 件 属 性 


属 性 名 类 型 默认 值 说 明 
id string audio 组 件 的 唯一 标识 符 
STC string false 要 播放 音频 的 资源 地 址 
loop boolean false 是 否 循环 播放 
controls boolean false 是 否 显示 默认 控件 
默认 控件 上 的 音频 封面 的 图 片 资源 地 址 ,如 果 controls 属 
ee ee, 性 值 为 false, 则 设置 poster 无 效 
本 ek 未 知音 频 默认 控件 上 的 音频 名 字 , 如 果 controls 属性 值 为 false, 则 
设置 name 无 效 
默认 控件 上 的 作者 名 字 , 如 果 controls 属性 值 为 false, 则 
author String 未 知 作者 设置 author 无 效 
2 当 发 生 错 误 时 触发 error 事件 , detail 二 {errMsg: 
binderror eventhandle 


MediaError.code} 
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续 表 
属 性 名 类 型 默认 值 说 上 明 
bindplay eventhandle 当 开 始 /继续 播放 时 触发 play 事件 
bindpause eventhandle 当 暂 停 播放 时 触发 pause 事件 


当 播 放 进 度 改 变 时 触发 imeupdate 事件 , detail = 


bindtimeupdate | eventhandle 
{currentTime, duration) 


bindended eventhandle 当 播 放 到 末尾 时 触发 ended 事件 


其 中 ,binderror 属性 触发 后 的 返回 值 MediaError.code 共有 4 种 取 值 : 
(1) 获取 资源 被 用 户 禁 止 ; 
(2) 网 络 错误 ; 
(3) 解码 错误 ; 
(4) 不 合适 资源 。 
[ 贺 3-19 audio 组 件 小 案例 ,运行 效果 如 图 3.29 所 示 。 


19.audio 小 案例 19.audio 小 案例 19.audio 小 案例 
网 络 音频 播放 网 络 音频 播放 网 络 音频 播放 | 
窗 wn wa i 密 sm “| 
播放 析 停 设置 当前 失败 时 间 为 10 炒 播 故 暂停 设置 当前 播放 8 人 间 为 10 秒 预 放 暂停 设置 当前 搬 放 时 间 为 10 纱 | 


(a) 页 面 初始 效果 (b) 音频 正在 播放 (c) 音频 回 到 10 秒 处 
图 3.29 audio 组 件 小 案例 


pages/audio/audio.wxml 文件 代码 如 下 : 


< View class = "demo — box"> 
< view class = "title"> 19. audio 小 案例 </view> 
< view class = "title"> 网 络 音频 播放 </view> 
<view> 
< audio poster = "{{poster}}" name= "{{name}}" author = "{{author}}" 
src="{{src}}" id= "myAudio" controls loop> 
</audio> 
< button size = "mini" bindtap = "audioPlay"> 播 放 </button > 
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< button size = "mini" bindtap = "audioPause"> 和 暂停 </button > 
<button size= "mini" bindtap = "audiol0"> 设 置 当 前 播放 时 间 为 10 秒 </button > 
</view> 
</view> 


pages/audio/audio.js 文件 代码 如 下 : 


Page({ 
onReady: function(e) { 
// 使 用 wx. createAudioContext 获取 audio 上 下 文 context 
this. audioCtx = wx.createAudioContext( 'myAudio') 
}, 
data: { 
poster: 'http://Y.gtimg. cn/music/photo_new/T002R300x300M00000 
3rsKF44GyaSk. jpg?max_age = 2592000'… 
name: "此 时 此 刻 '， 
author:“' 许 者 '， 
src: 'http://ws. stream. qqmusic. qq. com/M500001VfvsJ21xFqb. mp3?guid = 
ffffffff82def4af4b12b3cd9337d5e7&uin = 346897220&vkey = 6292F51E1E384 
E06DCBDC9AB7CA49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053 
BF8DFEAF74COASCCFADD6471160CAF3E6A&fromtag = 46°', 
}, 
audioPlay: function() { 
this. audioCtx. play() // 播 放 音 乐 
}, 
audioPause: function() { 
this. audioCtx. pause( ) // 暂 停 播放 
}, 
audiol0: function() { 
this. audioCtx. seek(10) // 回 到 10s 
}, 
}) 


【代码 讲解 】 本 例 先 在 audio. wxml 文件 中 放置 < audio > 组 件 ,然后 设置 3 组 
< button > 按钮 ,分 别 用 于 控制 音频 的 播放 、 暂 停 以 及 定位 到 10s 处 的 播放 位 置 。< audio > 
组 件 的 属性 值 在 audio.js 文件 中 定义 ,包括 音频 封面 图 片 、 歌 曲名 、 演 唱 者 和 音频 来 源 ,并 为 
3 组 按钮 绑 定点 击 事件 ,在 audio.js 文件 中 自 定义 audioPlay() 函数 、audioPause() 函 数 和 
audio100( 〇 函数。 

图 3.29(a) 为 页 面 初始 状态 ; 图 3.29(b) 为 点 击 “ 播 放 ” 按 钮 后 ,网 络 音频 呈现 播放 状态 ， 
音频 处 于 0 分 23 秒 ; 图 3.29(c) 为 网 络 音 频 正 在 播放 时 ,点 击 “ 设 置 当 前 播放 时 间 为 10 秒 ” 
按钮 后 ,音频 回 到 0 分 10 秒 处 播放 。 


3.6.2 image 


<image > 为 图 片 组 件 , 常 用 于 浏览 图 片 ,通过 设置 属性 mode 能 够 对 图 片 进行 裁剪 和 缩 
放 , 共 有 13 种 模式 ,其 中 4 种 是 缩放 模式 ,9 种 是 裁剪 模式 ,其 属性 如 表 3.28 所 示 。 
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表 3.28 < image> 组 件 属性 
默认 值 说 明 


SrC string 图 片 资源 地 址 ,支持 云 文件 ID( 基 础 库 2.2.3 起 支持 ) 

mode string 'scaleToFill' | 图 片 裁剪 ,缩放 的 模式 

ee palse 图 片 懒 加 载 .在 即将 进入 当前 屏幕 可 视 区 域 时 才 开 始 加 载 
(基础 库 1.5.0 起 支持 ) 

binderror | eventhandle 当 错误 发 生 时 , 发布 到 AppService 的 事件 名 ,事件 对 象 
event.detail = {errMsg: 'something wrong'} 

当 图 片 载 入 完毕 时 ,发 布 到 AppService 的 事件 名 ,事件 对 象 
bindload “| eventhandle 


event.detail 二 {height: "图 片 高 度 px'，width:' 图 片 宽度 px'} 


image 组 件 默认 宽度 300px、 高 度 225px。image 组 件 中 二 维 码 / 小 程序 码 图 片 不 支持 
长 按 识别 , 仅 在 wx.previewImage() 中 支持 长 按 识 别 。 
e 有 效 值 的 属性 名 及 说 明 如 表 3.29 所 示 。 


mod 


表 3.29 mode 有 效 值 的 属性 名 及 说 明 


属 性 名 说 明 
scaleToFil 不 保持 纵横 比例 缩放 图 片 ,使 图 片 的 宽 ,高 完全 拉 伸 至 填 满 image 元 素 
本 保持 纵横 比例 缩放 图 片 ,使 图 片 的 长 边 能 完全 显示 出 来 。 也 就 是 说 ,可 
缩放 模式 以 完整 地 将 图 片 显 示 出 来 
保持 纵横 比例 缩放 图 片 ,只 保证 图 片 的 短 边 能 完全 显示 出 来 。 也 就 是 
pe 说 ,图 片 通常 只 在 水 平 或 垂直 方向 是 完整 的 , 另 一 个 方向 将 会 发 生 截 取 
widthFix 宽度 不 变 ,高 度 自 动 变 化 ,保持 原 图 宽 .高 比 不 变 
top 不 缩放 图 片 , 只 显示 图 片 的 顶部 区 域 
bottom 不 缩放 图 片 ,只 显示 图 片 的 底部 区 域 
center 不 缩放 图 片 ,只 显示 图 片 的 中 间 区 域 
left 不 缩放 图 片 ,只 显示 图 片 的 左边 区 域 
裁剪 模式 | right 不 缩放 图 片 .只 显示 图 片 的 右边 区 域 
top left 不 缩放 图 片 ,只 显示 图 片 的 左上 边区 域 
top right 不 缩放 图 片 , 只 显示 图 片 的 右上 边区 域 
bottom left 不 缩放 图 片 ,只 显示 图 片 的 左下 边区 域 
bottom right 不 缩放 图 片 ,只 显示 图 片 的 右 下 边区 域 


[ 国 3-20”image 组 件 小 案例 。 
pages/image/image.wxml 文件 代码 如 下 : 


<view class = "demo - box"> 
<view class = "title"> 20. audio 小 案例 </view> 


<view class = "title">(1) 不 保持 纵横 比 缩放 图 片 ,使 图 片 完 全 适应 </view> 

< image src= "{{src}}" mode = "scaleToFill"></image> 

<view class = "title">(2) 保 持 纵横 比 缩放 图 片 , 使 图 片 的 长 边 能 完全 显示 出 来 </view> 

< image src= "{{src}}" mode = "aspectFit"></image> 

<view class = "title">(3) 保 持 纵横 比 缩放 图 片 , 只 保证 图 片 的 短 边 能 完全 显示 出 来 </view > 
< image src = "{{src}}" mode = "aspectFil1"></image> 


<view class = "title">(4) 宽 度 不 变 ,高 度 自动 变化 ,保持 原 图 宽 高 比 不 变 </view> 
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< image src= "{{src} 


“ 微 课 视频 版 


mode = "widthFix"></image > 


<view class = "title">(5) 不 缩放 图 片 ,只 显示 图 片 的 顶部 区 域 </view> 


< image src= "{{src} 


" mode = "top"></image> 


<view class = "title">(6) 不 缩放 图 片 ,只 显示 图 片 的 底部 区 域 </view> 
< image src="{{src}}" mode = "bottom"></image> 


<view class = "title">(7) 不 缩放 图 片 ,只 显示 图 片 的 中 间 区 域 </view> 


< image src= "{{src} 


mode = "center"></image> 


<view class = "title">(8) 不 缩放 图 片 ,只 显示 图 片 的 左边 区 域 </view> 

< image src= "{{src}}" mode = "left"></image> 

<view class = "title">(9) 不 缩放 图 片 ,只 显示 图 片 的 右边 区 域 </view> 

< image src= "{{src}}" mode = "right"></image> 

< view class = "title">(10) 不 缩放 图 片 ,只 显示 图 片 的 左上 边区 域 </view> 
< image src="{{src}}" mode = "top left"></image> 

< view class = "title">(11) 不 缩放 图 片 ,只 显示 图 片 的 右上 边区 域 </view> 
< image src="{{src}}" mode = "top right"></image > 


<view class = "title">(12) 不 缩放 图 片 ,只 显示 图 片 的 左下 边区 域 </view> 


< image src= "{{src} 


" mode = "bottom left"></image> 


< view class = "title">(13) 不 缩放 图 片 ,只 显示 图 片 的 右 下 边区 域 </view> 


< image src= "{{src}} 


</view> 


" mode = "bottom right"></image > 


pages/image/image.wxss 文件 代码 如 下 : 


image { 


} 


width: 300rpx; 
height: 300rpx; 
margin - left: 150rpx; 


pages/image/image.js 文件 代码 如 下 : 


Page({ 


本 例 在 images 文件 夹 下 存放 素材 图 片 xingkong.jpg, 图 片 选 择 楚 高 的 名 画 人 《星空 》, 原 


data: { 


src: "/images/xingkong. jpg" 


} 
}) 


图 如 图 3.30 所 示 。 
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图 3.30 图 片 素材 


运行 效果 如 图 3.31 所 示 。 
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(1) 不 保持 纵横 比 缩 这 
片 完全 适应 


(a) 缩放 模式 : scaleToFill 


(宽度 不 变 ， 高 度 自动 变化 ， 保 
持原 图 宽 高 比 不 变 


图 片 ， 使 图 


网 


(2) 保 持 纵横 比 缩放 图 片 ， 使 
的 长 边 能 完全 显示 出 来 


(b) 缩放 模式 : aspectFit 


(5) 不 缩放 图 片 ， 只 显示 图 片 的 顶 
部 区 域 


(3) 保 持 纵横 比 缩放 图 片 ， 只 保证 
图 片 的 短 边 能 完全 显示 出 来 


(c) 缩放 模式 : aspectFil 


只 显示 图 片 的 底 


(6) 不 缩放 图 
部 区 域 


片 ， 


(d) 缩放 模式 : widthFix 


(7) 不 缩放 图 片 ， 只 
间 区 域 


显示 图 片 的 中 


(g) 裁剪 模式 : center 


(10) 不 缩放 图 片 ， 只 显示 图 
左上 边区 域 


(e) 裁 前 模式 ，top 


(1f) 裁剪 模式 ， bottom 


(8) 不 缩放 图 片 ， 只 显示 图 片 的 左 
边区 域 


(h) 裁剪 模式 : left 


片 ， 只 显示 图 片 的 


(9) 不 缩放 图 片 ， 只 显示 图 片 的 右 
边区 域 


(iD 裁剪 模式 : right 


(12) 不 缩放 
左下 边区 域 


片 ， 只 显示 


0) 裁剪 模式 : top left 


(k) 裁剪 模式 : top right 


(13) 不 缩放 图 
右 下 边区 域 


片 ， 只 显示 匿 


片 的 


(m) 裁剪 模式 : bottom right 
图 3.31 image 组 件 小 案例 


() 裁剪 模式 : bottom left 
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【代码 讲解 】 本 例 在 image.wxml 文件 中 放置 了 13 组 < image > 组 件 ,通过 设置 不 同 的 
mode 属性 值 ,实现 对 图 片 的 缩放 和 剪裁 。 


3.6.3 video 


<video > 为 视频 组 件 , 用 于 播放 本 地 或 网 络 的 视频 资源 ,视频 的 默认 宽度 为 300px、 高 
度 为 225px, 视 频 组 件 提供 弹 幕 功能 ,其 属性 如 表 3.30 所 示 。 


表 3.30 < video > 组 件 属性 


属 性 名 类 型 默认 值 说 明 
: 要 播放 视频 的 资源 地 址 ,支持 云 文件 ID 
Src String C6) 
duration number 指定 视频 时 长 
Boe boolean i 是 否 显示 默认 播放 控件 (播放 /暂停 按钮 、 播 
放 进 度 、 时 间 ) 
danmu-list Array.< object > 弹 幕 列表 
是 否 展示 弹 幕 ,只 在 初始 化 时 有 效 , 不 能 动 
enable-danmu boolean false A 
态 变 更 
autoplay boolean false 是 否 自动 播放 
loop boolean false 是 否 循 环 播放 
muted boolean false 是 否 静 音 播放 
initial-time number 指定 视频 初始 播放 位 置 
在 非 全 屏 模式 下 ,是 否 开启 亮度 与 音量 调节 
page-gesture boolean false 手势 
i ee 设置 全 屏 时 视频 的 方向 ,不 指定 则 根据 宽 、 
高 比 自动 判断 
show-progress boolean true 若 不 设置 ,宽度 大 于 240 时 才 会 显示 
show-fullscreen-btn boolean true 是 否 显 示 全 屏 按钮 
show-play-btn boolean true 是 否 显示 视频 底部 控制 栏 的 播放 按钮 
show-center-play-btn boolean true 是 否 显示 视频 中 间 的 播放 按钮 
enable-progress-gesture boolean true 是 否 开 启 控制 进度 的 手势 
object-fit string contain 和 
频 的 表现 形式 
视频 封面 的 图 片 网 络 资源 地 址 或 云 文件 ID。 
poster string 车 controls 属性 值 为 false 则 设置 poster 
无 效 
show-mute-btn boolean false 是 否 显示 静音 按钮 
title string 视频 的 标题 ,全 屏 时 在 顶部 展示 
play-btn-position string bottom 播放 按钮 的 位 置 
enable-play-gesture boolean false 是 否 开启 播放 手势 , 即 双击 切换 播放 /暂停 
auto-pause-if-navigate boolean true 时 竺 到 其 但 小 各 所 可 辐 肝 : 震 窜 目 动 客栈 
本 页 面 的 视频 
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续 表 
属 性 名 类 型 ”| 默认 值 说 明 

a tie ， 当 跳 转 到 其 他 微 信和 原生 页 面 时 ,是 否 自动 暂 
auto-pause-if-open-native ean rue 停 本 页 面 的 视频 

St a yn 在 非 全 屏 模式 下 ,是 否 开 启 亮度 与 音量 调节 
vslide-gesture oolean alse 下 ee) 

在 全 屏 模式 下 ,是 否 开启 亮度 与 音量 调节 

vslide-gesture-in-fullscreen | boolean true 


手势 


bindplay eventhandle 当 开 始 / 继 续 播 放 时 触发 play 事件 
bindpause eventhandle 当 和 暂停 播放 时 触发 pause 事件 
bindended eventhandle 当 播 放 到 末尾 时 触发 ended 事件 


bindtimeupdate 


eventhandle 


播放 进度 变化 时 触发 , event. detail = 
{currentTime, duration)} 。 触 发 频率 250ms 
一 次 


bindfullscreenchange 


eventhandle 


视频 进入 和 退出 全 屏 时 触发 ,event.detail 一 
{fullScreen，direction), direction 有 效 值 为 


vertical 或 horizontal 


bindwaiting 


eventhandle 


视频 出 现 缓冲 时 触发 


binderror 


eventhandle 


视频 播放 出 错时 触发 


bindprogress 


[ 圆 3-21 video 组 件 小 案例 ,运行 效果 如 图 3.32 所 示 。 


eventhandle 


pages/video/video.wxml 文件 代码 如 下 : 


< View class = "demo — box"> 
<view class = "title"> 21. video 小 案例 </view> 
<video id= "myVideo" src="{{src}}" danmu— list = "{{danmuList}}" 


enable - danmu controls ></video > 


< view class = "weui - label"> 弹 幕 内 容 :</view> 
< input bindblur = "bindInputBlur" type = "text"” placeholder = "在 此 处 输入 弹 幕 内 容 " /> 
< button size= "mini" bindtap = "bindPlay"> 播 放 </button > 

< button size= "mini" bindtap = "bindPause"> 暂 停 </button > 

< button bindtap = "bindSendDanmu" size = "mini” formType = "submit"> 发 送 弹 幕 </button > 


</view> 


pages/video/video.js 文件 代码 如 下 : 


Page({ 


onReady: function(res) { 


this. videoContext 


}, 


inputValue: "', 
data: { 


加 载 进度 变化 时 触发 ,只 支持 一 段 加 载 。 
event.detail 二 (buffered) ,百分比 


= wx.createVideoContext( 'myVideo') 


// 创 建 一 个 空 字符 串 用 于 保存 弹 幕 内 容 


src: "http://wxsnsdy. tc. qq. com/105/20210/snsdyvideodownload?filekey = 
30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e002040128 
82540400&bizid = 1023&hy = SH&fileparam = 302c020101042530230204136ffd93020457e3c4 
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ff02024ef202031e8d7f02030f42400204045a320a0201000400"， 


danmuList: [{ 
text: "第 1s 出 现 的 弹 幕 "， 
color: "#ff0000", 


time: 1 


2s 出 现 的 弹 幕 "， 
color: "#ff00ff", 


bindInputBlur: function(e) { 
this. inputValue = e. detail.value 

}, 

bindSendDanmu: function() { 
this. videoContext. sendDanmu( { 

text: this. inputValue, 

}) 

}, 

bindPlay: function() { 
this. videoContext. play( ) 

}, 

bindPause: function() { 


this. videoContext. pause( ) 


21video 小 案例 21-video 小 案例 21.video 小 案例 
05:30 [DS 
第 2s 出 现 的 弹 幕 


弹 幕 内 容 : 
许 此 外 输入 


播放 暂停 


// 获 取 输入 内 容 


// 发 送 弹 幕 


// 播 放 视频 


// 和 暂停 视频 


弹 幕 内 容 
12345678 


播放 蜀 访 i 


(a) 页 面 初始 状态 
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(b) 视频 播放 状态 


video 组 件 小 案例 


pages/video/video.wxss 文件 代码 如 下 : 


input { 


border: 1px solid gray; 


} 


【代码 讲解 】 
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本 例 在 video.wxml 文件 中 放置 < video > 组 件 并 设置 其 相关 属性 ， 
<input > 组 件 用 来 输入 弹 幕 内容 , 通 过 3 组 < button > 组 件 分 别 绑 定点 击 事件 bindPlay()、 
bindPause() 、bindSendDanmu() 来 实现 视频 播放 、 暂 停 和 发 送 弹 幕 ,并 在 video.js 文件 中 定 
义 视频 播放 的 资源 地 址 及 自 定义 事件 函数 。 

图 3.32(a) 为 初始 化 界面 ,呈现 暂停 状态 ; 图 3.32(b) 为 点 击 “ 播 放 ” 按 钮 后 ,视频 呈现 播 
放 状 态 ; 图 3.32(c) 为 在 输入 框 输入 内 容 *12345678” 并 点 击 “ 发 送 弹 幕 " 按 钮 后 ,输入 框 中 的 
内 容 会 呈现 在 屏幕 上 。 


3.7 地 图 组 件 


< map > 为 地 图 组 件 ,用 于 地 图 的 展示 。 小 程序 使 用 的 地 图 来 自 腾讯 地 图 ,地 图 组 件 为 
用 户 提供 视角 中 心 点 地 位 、 缩 放 层级 的 设置 .标记 物 的 增加 以 及 内 部 组 件 的 事件 绑 定 ,其 属 


性 如 表 3.31 所 示 。 


表 3.31 < map>> 组 件 属性 

属 性 名 类 型 默认 值 说 明 
longitude number 中 心经 度 
latitude number 中 心 纬度 
scale number 16 缩放 级 别 , 取 值 范围 为 3 一 20 
marker Array.< marker > 弹 幕 列表 (基础 库 1.0.0 起 支持 ) 
Cover Array.< cover> 即将 移 除 , 请 使 用 markers 
polyline Array.< polyline > 路 线 
circle Array.< circles > 圆 
control Array.< control > false | 控件 (即将 废弃 ,建议 使 用 cover-view 代替 ) 
include-point Array.< point > 缩放 视野 以 包含 所 有 给 定 的 坐标 点 
show-location boolean false 显示 带 有 方向 的 当前 定位 点 
bindtap eventhandle 点 击 地 图 时 触发 
bindmarkertap eventhandle 点 击 标记 点 时 触发 ,会 返回 marker 的 id 
bindcontroltap eventhandle 点 击 控件 时 触发 ,会 返回 control 的 id 
bindcallouttap eventhandle 点 击 标 记 点 对 应 的 气泡 时 触发 ,会 返回 marker 的 id 
bindupdated eventhandle 视野 发 生变 化 时 触发 
bindregionchange | eventhandle 是 否 开启 控制 进度 的 手势 (基础 库 1.9.0 起 支持 ) 
bindpoitap eventhandle 点 击 地 图 poi 点 时 触发 
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其 中 ,marker 为 标记 点 ,用 于 在 地 图 上 显示 标记 的 位 置 ,其 属性 如 表 3.32 所 示 。 


表 3.32 marker 属性 


属性 名 说 明 类 型 备 注 
marker 点 击 事件 回调 会 返回 此 id。 建 议 为 
id 标记 点 id number 每 个 marker 设置 number 类 型 id, 保 证 更 新 
marker 时 有 更 好 的 性 能 
latitude 纬度 number 浮 点 数 ,范围 为 一 90 一 90” 
longitude | 经 度 number 浮 点 数 , 范 围 为 一 180 一 180” 
i 标注 问 儿 We value 改变 时 触发 change 事件 ,event.detail 一 
{value: value} 
项 目 目录 下 的 图 片 路 径 ,支持 相对 路 径 写 
iconPath | 显示 的 图 标 string 法 ,以 '/ 开头 则 表示 相对 小 程序 根 目录 ; 也 
支持 临时 路 径 和 网 络 图 片 
rotate 旋转 角度 number Re 0 
alpha 标注 的 透明 度 number 默认 为 1, 无 透明 ,范围 为 0 一 1 
width 标注 图 标 宽度 number/string 默认 为 图 片 实际 宽度 
height 标注 图 标高 度 number/string 默认 为 图 片 实际 高 度 
este 支持 的 属性 见 表 3.33, 可 识别 换行 符 
泡 窗口 
label 为 标记 点 旁边 增加 标签 Object 支持 的 属性 见 表 3.34, 可 识别 换行 符 
di 经 度 和 纬度 在 标注 图 标 {x，y},x 表示 横向 (0 一 1) ,y 表示 纵向 (0 一 
的 锚 点 ,默认 底 边 中 点 1D。{x: .5，y: 1} 表 示 底 边 中 点 


marker 上 的 气泡 callout ,其 属性 如 表 3.33 所 示 。 


表 3.33 callout 属性 


属 性 名 说 明 类 型 最 低 版 本 
content 文本 string 1.2:0 
color 文本 颜色 string .2.0 
fontSize 文字 大 小 number 1.2.0 
borderRadius 边框 圆 角 number 1.2.0 
borderWidth 边框 宽度 number 1.2.0 
borderColor 边框 颜色 String 1.2.0 
bgColor 背景 色 string L220 
padding 文本 边缘 留 白 number 1.2.0 
display 'BYCLICK': 点 击 显 示 ; 'ALWAYS': 常 显 string 1.2.0 
textAlign 文本 对 齐 方 式 . 有 效 值 : leftright、center、string string 1.6.0 


118 


marker 上 的 气泡 label, 其 属性 如 表 3.34 所 示 。 


第 3 章 。” 微 信 小 程序 组 件 03 


表 3.34 label 属性 
属 性 名 说 明 类 型 最 低 版 本 
content 文本 string 1.2.0 
color 文本 颜色 string 1.2.0 
fontSize 文字 大 小 number 1.2.0 
borderRadius ”| 边框 圆 角 number L220 
borderWidth 边框 宽度 number 2.3.0 
borderColor 边框 颜色 String S30 
bgColor 背景 色 string 1.2.0 
padding 文本 边缘 留 白 number 1.2.0 
display 'BYCLICK': 点 击 显示 ; 'ALWAYS': 常 显 string 1.2.0 
textAlign 文本 对 齐 方式 ,有 效 值 : left、right、center string 1.6.0 


polyline 用 于 指定 一 系列 坐标 点 ,从 数组 第 一 项 连 线 至 最 后 一 项 ,其 属性 如 表 3.35 所 示 。 


表 3.35 ”polyline 属性 


属 性 名 说 明 类 型 备 注 
points 经 度 和 纬度 数组 array [flatitude: 0, longitude: 0)] 
color 线 的 颜色 string 十 六 进 制 
width 线 的 宽度 number 
dottedLine 带 箭 头 的 线 boolean 默认 值 为 false 
arrowLine 边框 宽度 number 默认 值 为 false, 开 发 者 工具 暂 不 支持 该 属性 
arrowJIconPath 更 换 箭头 图 标 string 在 arrowLine 为 true 时 生效 
borderColor 线 的 边框 颜色 String 
borderWidth 线 的 厚度 number 


circle 属性 用 于 在 地 图 上 显示 圆 ,通过 设 定 中 心 点 的 经 度 、 纬 度 和 半径 来 绘制 一 个 圆 形 
图 案 作 为 地 图 上 的 标记 物 ,其 属性 如 表 3.36 所 示 。 


表 3.36 circle 属性 

属 性 名 说 明 类 型 备 注 
latitude 纬度 number 浮 点 数 ,范围 为 一 90 "一 90” 
longitude 经 度 number 浮 点 数 ,范围 为 一 180" 一 180” 
color 描 边 的 颜色 String 十 六 进 制 
fillColor 填充 颜色 string 十 六 进 制 
radius 半径 number 
strokeWidth 描 边 的 宽度 number 


[ 圆 3-22 map 组 件 小 案例 ,程序 运行 效果 如 图 3.33 所 示 。 


pages/map/map.wxml 文件 代码 如 下 : 


< map id = "myMap" style = "width: 100%; height: 300px"” latitude = 
"{{1latitude}}" longitude = " {{longitude}}" scale = "{{scale}}" markers = 


"{{markers}}" polyline = "{{polyline}}" show - location></map> 
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< view class = "content"> 


<button size = "mini" bindtap = "reduce"> - </button> 
ini" bindtap = "default"> 默 认 缩放 比例 </button > 
<button size= "mini" bindtap = "add"> + </button > 


</view> 


<button size= 


<view class = "content"> 
< button size = "mini" bindtap = "includePoints"> 按 includePoints 缩放 视野 </button > </view> 


O 
元 擒 村 小 区 


© 
9 刍 开 大 下 
( © 
A 
© 


| 他 


@ 
胜 和 广场 


Mee 


默认 纺 放 比例 


默认 缩放 比例 。 + 默认 纺 放 比例 


按 includePoints 纺 视野 按 includePoints 思 放 视 县 按 includePoints 纺 放 视 野 


(a) 16 倍 缩放 比例 效果 (b) 17 倍 缩放 比例 效果 (©) 包含 两 个 点 时 的 缩放 比例 效果 
图 3.33 ”map 组件 小 案例 


pages/map/map.js 文件 代码 如 下 : 


Page({ 
data: { 
latitude: 23.020670, longitude: 113.751790, 
scale:16, 
markers: [{ 
latitude: 23.020670, longitude: 113.751790, 
iconPath: "/images/location. png", 
label: { 
content: "东莞 市 ”} 
a 
polyline: [{ 
points: [{ 
longitude: 113.3245211, 
latitude: 23.10229 
| 
longitude: 113.324520, latitude: 23.21229 
}], 
color: "#FF0000DD", 
width: 2, 
dottedLine: true 
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onReady: function(e) { 
this. mapCtx = wx.createMapContext("myMap") 
}, 
default :function() 
{ 
this. setData({ scale: 16, }) 
}, 
reduce: function() { 
this. setData( { 
scale: this. data. scale—1, 
}) 
}, 
add: function() { 
this. setData( { 
scale: this. data. scale +1, 
}) 
}, 
includePoints: function() { // 缩 放 视 时 
this. mapCtx. includePoints({ 
padding: [10], 
points: [{ 
latitude: 23.0403, longitude: 113.7446, 
}, 1{ 
latitude: 22.9983, longitude: 113.7724, 


【代码 讲解 】 本 案例 共 定 义 4 个 函数 : default、reduce、add 和 includePoints, 其中， 
default 函数 把 地 图 设置 为 默认 的 16 倍 缩放 比例 ,reduce 和 add 两 个 函数 实现 缩放 比例 的 
加 一 和 减 一 ,includePoints 函数 指定 (23.0403,113.7446) 和 (22.9983,113.7724) 两 个 点 ,此 
时 map 地 图 缩放 比例 的 依据 就 是 需要 在 地 图 中 包含 这 两 个 点 , 即 这 两 个 点 需 作为 map 地 
图 4 个 顶点 中 的 两 个 。 

图 3.33(a) 为 默认 的 16 倍 缩放 比例 效果 ; 图 3.33(b) 为 17 倍 缩放 比例 效果 ; 图 3.33(c) 
为 包含 (23.0403 ,113.7446) 和 (22.9983 ,113.7724) 两 个 点 时 的 缩放 比例 效果 。 


3.8 实 训 项 目 问卷 调查 


本 实 训 项 目 是 对 微 信 小 程序 学 习 的 问卷 调查 ,知识 点 主要 涉及 表单 组 
件 的 使 用 和 表单 数据 在 逻辑 端 JS 中 的 获取 。 项 目 中 涉及 的 表单 组 件 有 
< form >< radio-group ><radio > <checkbox-group >< checkbox >< label > 
< slider >< textarea > 和 < button > 等 。 

项 目 在 模拟 器 中 的 效果 如 图 3.34 所 示 ; 图 3.35 是 Console 控制 台 上 显 视频 讲解 
示 的 JS 接收 到 的 用 户 输入 数据 。 

pages/survey/survey.wxml 文件 代码 如 下 : 


< view class = "content"> 
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< form bindsubmit = "onSubmit" bindreset = "onReset"> 
< view class = "title"> 1. 你 现在 大 几 ?</view> 
< radio - group bindchange = "universityChange"> 
< radio value = "大 一 "/> 大 一 


</radio - group > 
<view class = "title"> 2. 你 使 用 手机 最 大 的 用 途 是 什么 ?</view > 
< checkbor — group bindchange= "mobi]Change"> 


< label >< checkbox value = "社交 "/> 社 交 </label > 
<label> 

< checkbox value = "网 购 "/> 网 购 </label > 
<label> 


< checkbox value = "学 习 "/> 学 习 </label >< label> 
< checkbox value = "其 他 "/> 其 他 </label > 
</checkbox - group > 
< view class = "title"> 3. 平 时 每 天 使 用 手机 多 少 小 时 ?</view> 
< slider min = "0" max = "24" show - value bindchange = "timechange" /> 
<view class = "title"> 4. 你 之 前 使 用 过 微 信 小 程序 吗 ?</view > 
< radio - group bindchange = "programChange"> 
<radio value = "无 "/> 无 


"有 "/> 有 


<radio value= 
</radio - group > 
< view class = "title"> 5. 谈 谈 你 对 微 信 小 程序 未 来 发 展 的 看 法 </view> 
< textarea auto - height placeholder = "请 输入 你 的 看 法 " name = "textarea"” /> 
< button size = "mini" form - type ubmit"> 提 交 </button > 
< button size = "mini" form - type = "reset"> 重 置 </button > 
</form> 
</view> 


1 你 现在 大 几 ? 
大 - (大 = 和 三 (大 四 


2. 你 使 用 手机 最 大 的 用 途 是 什么 ? 
社交 ”网购 学 习 其 他 


3. 平 时 每 天 使 用 手机 多 少 小 时 ? 


4. 你 之 前 使 用 过 微 信 小 程序 吗 ? 
@ 无 ”有 
5 谈 谈 你 对 微 信 小 程序 未 来 发 展 的 看 法 


小 程序 很 有 前 途 ， 我 会 好 好 学 习 ， 我 很 爱 
小 程序 ， 相 信 会 学 好 ， 谢 谢 清华 大 学 出 版 


社 这 本 小 程序 书 ， 对 我 学 习 小 程序 很 有 帮 民 | Console Sources 。 Network Securty AppData Audits » 
最 四 @ iop v | @ | Fer Default levels » 
提交 重 亚 你 选择 的 现在 大 几 : 大 三 


你 选择 使 用 手机 的 最 大 用 途 是 : [学习 了 
你 选择 的 每 天 使 用 手机 的 时 间 是 : 7 小 时 
你 选择 的 是 否 使 用 过 签 信 小 程序 : 无 Maservice.js:1 


你 输入 的 对 小 程序 发 展 前 途 的 看 法 是 小 程序 很 有 前 途 ， 我 会 好 好 学 习 , 我 很 爱 WAService.js:1 
小 程序 ， 相 信 会 学 好 ， 谢 谢 清华 大 学 出 版 社 这 本 小 程序 书 ， 对 我 学 习 小 程序 很 有 帮助 


图 3.34 问卷 调查 示例 图 图 3.35 ”Console 控制 台 显 示 数 据 
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pages/survey/survey.js 文件 代码 如 下 : 


Page({ 

universityChange: function(e) { 

console. 1og(" 你 选择 的 现在 大 几 : "，e. detail.value) 

}, 
mobilChange: function(e) { 

console. log(" 你 选择 使 用 手机 的 最 大 用 途 是 : "，e. detail. value) 
}, 
timechange: function(e) { 

console. log(" 你 选择 的 每 天 使 用 手机 的 时 间 是 : "，e. detail. value + "小 时 ") 
}, 
programChange: function(e) { 

console. log(" 你 选择 的 是 否 使 用 过 微 信 小 程序 : "，e. detail. value) 
}, 
onSubmit(e) { 

console. 1og(" 你 输入 的 对 小 程序 发 展 前 途 的 看 法 是 " + e. detail. value. textarea) 
}, 
onReset() { 

console. log( "表单 已 被 重 置 ") 

} 
}) 


pages/survey/survey.wxss 文件 代码 如 下 : 


.content { 
padding: 30rpx; 
} 
button { 
margin: 40rpx; 
} 
.title { 
margin ~ top: 20rpx; 

} 

【代码 讲解 】 本 项 目 是 常用 的 问卷 调查 页 面 .“ 你 现在 大 几 ?” 和 “你 之 前 使 用 过 微 信 小 
程序 吗 ?” 两 项 使 用 了 < radio-group > 和 < radio > 组 件 ;“ 你 使 用 手机 最 大 的 用 途 是 什么 ?” 使 
用 了 < checkbox-group > 和 < checkbox > 组 件 ;“ 平 时 每 天 使 用 手机 多 少 个 小 时 ?” 使 用 了 
< slider > 组 件 ;“ 谈 谈 你 对 微 信 小 程序 未 来 发 展 的 看 法 ”使 用 了 < textarea > 组 件 ;“ 提 交 ”“ 重 
置 ?按钮 使 用 了 < button > 组 件 ; 而 < form > 和 < label > 组 件 属于 控制 类 组 件 ,没有 在 页 面 中 
显示 效果 。 读 者 需 认真 学 习 JS 页 面 获 取 表单 数据 的 方法 ,为 后 续 编程 做 准备 。 
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对 于 不 熟悉 CSS 的 程序 员 来 说 ,开发 微 信 小 程序 面临 比较 困难 的 问题 就 是 界面 的 排 
版 。 微 信 小 程序 的 排版 跟 WXML 和 WXSS 有 关 , 其 中 ,WXML 指定 了 界面 的 框架 结构 ,而 
WXSS 指定 了 界面 的 框架 及 元 素 的 显示 样式 。 本 章 结合 小 程序 编程 的 特点 介绍 其 样式 与 
布局 。 

本 章 主要 目标 

。 了 解 样式 与 布局 的 基本 概念 ; 

。 掌握 样式 中 盒子 模型 .选择 器 和 常见 的 样式 属性 ; 

。 熟练 掌握 flex 布局 layer 布局 和 float 布局 ; 

。 具备 设计 美观 小 程序 界面 的 能 力 。 


4.1 小 程序 样式 


要 想 设计 出 美观 的 小 程序 ,需要 努力 学 习 小 程序 样式 和 布局 。 

WXML(WeiXin Markup Language) 是 小 程序 框架 提供 的 标签 语言 ,结合 基础 组 件 以 构 
建 出 页 面 结构 。WXSSCWeiXin Style Sheets) 是 小 程序 框架 提供 的 样式 语言 ,用 于 设置 组 件 
的 样式 。 


4.1.1 定义 样式 


WXSS 具有 CSS 的 大 部 分 特性 ,其 书写 规则 由 两 部 分 组 成 : 选择 和 声明 ,如 图 4.1 所 示 。 

选择 器 (selector) : 表明 该 样式 将 作用 于 哪些 对 象 ,这 些 对 象 可 以 是 某 个 标签 .指定 的 
class 或 id 值 等 。 在 解析 这 个 样式 时 ,根据 选择 器 来 演 染 对 象 的 显示 效果 。 

属性 (property) : 样式 的 选择 项 。 
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选择 器 ”样式 分 隔 符 样式 分 隔 符 
| \ 
name { font-size:10px;: Color:#333333; } 
标签 名 属性 ”属性 值 ” 属 性 属性 值 


图 4.1 CSS 样 式 基本 结构 


属性 值 (value) : 决定 样式 的 参数 。 
自 定义 文字 的 字体 为 12px, 颜 色 为 红色 ,示例 代码 如 下 : 


text { 
font ~ size: 12px; /x* 定义 字体 大 小 为 12px * / 
color: #f00; /* 定义 字体 颜色 为 红色 */ 


} 


上 述 代码 中 text 为 选择 器 ,font-size 和 color 为 两 个 属性 ,12px 和 #f00 为 对 应 的 属性 
值 。WXSS 注释 以 “/ * ”开始 ,以 “x* /” 结 束 。 关 于 选择 器 的 介绍 详 见 4.2 节 。 


4.1.2 ”使 用 样式 


1. 内 联 样式 
在 WXML 文件 中 使 用 style 可 以 直接 设置 组 件 的 样式 ,示例 代码 如 下 : 


<view style = "width:150rpx; height:150rpx"> 我 是 view 容器 < view> 


上 述 代码 中 通过 style 对 < view > 组 件 设 置 属 性 ,宽度 和 高 度 均 设 置 为 150rpx。 

2. 外 部 样式 

外 部 样式 分 为 自动 引用 和 样式 导入 。 

1) 自动 引用 

在 小 程序 目录 结构 中 , page 文件 夹 中 的 样式 为 局 部 样式 ,只 作用 于 对 应 的 页 面 。 
app.wxss 文件 中 的 样式 为 全 局 样式 ,会 作用 于 所 有 页 面 中 具有 相同 选择 器 的 组 件 , 当 局 部 
样式 出 现 与 全 局 样式 同名 的 选择 器 时 ,局 部 样式 会 覆盖 全 局 样式 。 

2) 样式 导入 

使 用 @import 语句 可 以 将 其 他 路 径 中 的 样式 引入 当前 文件 中 ,@import 后 面 需 要 注 明 
外 联 样式 表 的 相对 路 径 , 用 “; ”表示 语句 结束 。 

假设 有 一 个 公共 样式 common.wxss, 示 例 代码 如 下 : 

-bg— gray { 


background — color: gray; 


} 
在 其 他 的 页 面 中 都 可 以 通过 @import 语句 引入 外 部 文件 样式 表 ,示例 代 码 如 下 : 


@ import "common. wxss"; 
.bg— blue { 
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background - color: blue; 
} 


通过 导入 外 部 样式 ,.bg-gray 和 .bg-blue 样式 均 可 以 被 当前 页 面 使 用 。 


4.2 选择 器 


选择 器 (selector) 是 标签 与 样式 的 纽带 ,在 WXSS 文件 中 常用 的 选择 器 有 基础 选择 器 
和 复合 选择 器 。 


4.2.1 基础 选择 器 


1. 标签 选择 器 

给 标签 设置 样式 ,会 自动 指向 该 标签 。 语 法 : 
标签 选择 器 名 {属性 :属性 值 ;} 

示例 代码 如 下 。 

WXML 文件 中 : 

< text > 这 是 一 段 文字 < text > 

WXSS 文件 中 : 

text { 


color: red; 


} 
其 中 ,< text > 是 WXML 中 的 文本 组 件 ,text 是 WXSS 文件 中 的 样式 选择 器 ,color 是 text 
选择 器 的 属性 。 

2. class 选择 器 

语法 : 

.类 选择 器 名 { 属 性 : 属性 值 ;} 

选择 器 的 名 称 自 定义 ,名 称 应 当 醒 目 且 具有 意义 ,页 面 中 一 旦 设置 了 类 别 选择 器 ,页 面 
中 该 标签 都 具有 相同 的 样式 。 示 例 代码 如 下 。 

WXML 文件 中 : 

< text class = "title"> 这 是 一 行文 字 </text > 


< text class = "title"> 这 是 一 行文 字 </text > 
< text class = "title"> 这 是 一 行文 字 </text > 


WXSS 文件 中 : 


.title { 
color: red; 


} 
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其 中 ,.title 为 类 选择 器 ,color 为 属性 ,其 值 为 红色 ,页 面 中 这 类 标签 的 元 素 属性 相同 。 
3. id 选择 器 
语法 : 
# 选 择 器 名 {属性 : 属性 值 ;} 
选择 器 的 名 称 自 定义 ,名 称 应 当 醒 目 且 有 意义 。 示 例 代码 如 下 。 
WXML 文件 中 : 


<text id= "p- style"> 这 是 一 行文 字 </text > 
< text > 这 是 一 行文 字 </text > 


WXSS 文件 中 : 


#p- style { 
color: red; 


} 


其 中 ,#p-style 为 id 选择 器 ,对 特定 的 < text > 标签 设置 属性 ; color 为 属性 ,其 值 为 红色 ,只 
对 第 一 行 中 的 < text > 标签 生效 ,其 他 < text > 标签 不 受 影响 。id 选择 器 比 class 选择 器 更 具 
有 针对 性 。 


4.2.2 复合 选择 器 


1. 多 元 素 选择 器 

多 元 素 选 择 器 用 于 同时 设置 多 个 标签 具有 共同 的 样式 。 语 法 : 
选择 器 ,选择 器 ,选择 器 , … {共有 属性 : 属性 值 ;} 

选择 器 之 间 用 逗号 隔 开 。 示 例 代码 如 下 。 

WXML 文件 中 : 


< view > 我 是 view 组 件 </view> 
< text > 我 是 text 组 件 </text> 


WXSS 文件 中 : 


view, text { 
background — color: red; 
} 


其 中 ,“view，text” 为 多 元 素 选择 器 ,同时 设置 < view > 和 < text > 组 件 背 景 颜色 为 红色 。 
2. 后 代 元 素 选择 器 
后 代 元 素 选择 器 为 标签 的 后 代 设置 样式 。 语 法 : 
选择 器 1 选择 器 2 选择 器 3{ 属 性 : 属性 值 ;} 


选择 器 之 间 用 空格 隔 开 。 示 例 代码 如 下 。 
WXML 文件 中 : 
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<View> 
< image> 存 放 图 片 </image> 
</view> 


WXSS 文件 中 : 
View image{ 

width: 50rpx; height: 100rpx; 
} 


其 中 ,view image 为 后 代 元 素 选 择 器 ,设置 < view > 标签 嵌 套 中 的 < image > 图 片 大 小 ,宽度 
为 50rpx, 高 度 为 100rpx, 后 代 元 素 选择 器 用 于 对 特定 元 素 进 行 设置 。 


4.3 基础 样式 


在 Web 页 面 设计 中 使 用 的 样式 繁多 ,而 微 信 小 程序 的 界面 中 使 用 的 样式 有 所 减少 ,读者 
可 以 通过 查询 CSS 手册 获取 详细 信息 。 现 列举 在 小 程序 开发 中 经 常 使 用 的 样式 。 


4.3.1 文本 样式 


文本 样式 决定 页 面 中 文字 的 排版 ,可 以 设置 字符 缩 进 、 文 字 颜 色 、 字 符 间距 、 文 本 对 齐 方 
式 和 装饰 文字 等 ,常用 属性 如 表 4.1 所 示 。 


表 4.1 文本 样式 属性 


属 性 说 上 明 CSS 版 本 
color 设置 文本 的 颜色 1 
letter-spacing 设置 字符 间距 1 
line-height 设置 行 高 1 
text-align 规定 文本 的 水 平 对 齐 方 式 1 
text-decoration 规定 添加 到 文本 的 装饰 效果 1 
text-indent 规定 文本 块 首 行 的 缩 进 1 
text-transform 控制 文本 的 大 小 写 1 
vertical-align 设置 元 素 的 垂直 对 齐 方 式 1 
white-space 设置 如 何 给 元 素 控件 留 白 1 
word-spacing 设置 单词 间距 1 
text-align-last 当 text-align 设置 为 justify 时 ,最 后 一 行 的 对 齐 方 式 3 
text-justify 当 text-align 设置 为 justify 时 .指定 分 散 对 齐 的 方式 3 
text-outline 设置 文字 的 轮廓 3 
text-overflow 指定 文本 溢出 包含 的 元 素 , 应 该 发 生 什么 3 
text-shadow 为 文本 添加 阴影 3 
text-wrap 指定 文本 换行 规则 3 
word-break 指定 文字 的 断 行规 则 3 
word-wrap 是 否 对 过 长 的 单词 进行 换行 3 
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示例 代码 如 下 。 
WXML 文件 中 : 
< view class = "text"> 对 段落 首 行 缩 进 、 文 字 颜 色 、 字 符 间距 , 行 高 .水平 对 齐 方式 和 装饰 效果 进行 设 


置 .</view> 
WXSS 文件 中 : 


.text { 

text — indent: 2em; color: #00f; letter - spacing: 20rpx; 

line— height: 60rpx; text — align: left; text— decoration: underline; 
} 


运行 效果 如 图 4.2 所 示 。 


设置 文本 样式 ‘© 
对 段落 首 行 缩 进 文字 亨 色 


字符 间距 ， 行 高 ， 水 平 对 章 方 - 


式 和 装饰 效果 进行 设置 


图 4.2 设置 文本 样式 


在 WXSS 文件 中 对 文本 样式 进行 设置 ,文本 首 行 缩 进 2em、 字 体 颜 色 蓝 色 .字符 间距 
20rpx.、 行 高 60rpx\ 文 本 左 对齐 ,文本 增加 下 面 线 修饰 。 


4.3.2 字体 样式 


字体 样式 用 于 设置 字体 的 属性 ,常用 属性 如 表 4.2 所 示 。 
表 4.2 字体 样式 属性 


属 性 说 有明 CSS 版 本 
font 复合 属性 ,设置 字体 相关 属性 
font-family 规定 文本 的 字体 系列 1 
font-size 规定 文本 的 字体 尺寸 1 
font-style 规定 文本 的 字体 样式 1 
font-variant 规定 文本 的 字体 大 小 写 | 
font-weight 规定 字体 的 粗细 1 

示例 代码 如 下 。 

WXML 文件 中 : 

< text > 设置 字体 样式 </text > 
WXSS 文 件 中 : 

text { 


font - family: "Microsoft YaHei"; font - size: 50rpx; 
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font - style:oblique; font - weight:bold; 


} 旋 导 完 傈 甘 动 
在 WXSS 文 件 中 对 文字 的 样式 进行 设置 ,字体 雅 黑 .字体 大 小 
50rpx、 样 式 斜体 .字体 加 粗 ,运行 效果 如 图 4.3 所 示 。 


4.4 盒子 模型 


图 4.3 设置 字体 样式 


4.4.1 盒子 模型 概述 


当 对 一 个 文档 进行 布局 (layout) 时 ,浏览 器 的 演 染 引擎 会 根据 标准 之 一 的 CSS 基础 盒 
子 模型 (CSS basic box model) ,将 所 有 元 素 表示 为 一 个 个 矩形 的 盒子 。CSS 决定 这 些 盒子 
的 大 小 、 位 置 及 属性 (例如 颜色 .背景 .边框 尺寸 等 ) 。 盒 子 模型 规定 了 内 部 处 理 的 元 素 内 容 
(content) ,内 边 距 (padding) ,边框 (border) 和 外 边 距 Cmargin) 的 样式 ,其 模型 结构 如 图 4.4 
所 示 。 


图 4.4 盒子 模型 


在 盒子 模型 结构 中 ,最 内 层 为 盒子 的 内 容 (content) ,向 外 依次 是 内 边 距 (padding top、 
padding-right、padding-bottom、padding-left )、 边 框 (border-top、border-right、border- 
bottom .border-left) 以 及 外 边 距 (margin-top、margin-right、 margin-bottom margin-left) 。 
内 边 距 ,边框 和 外 边 距 分 别 都 有 上 、 下 、 左 、 右 4 个 属性 ,这 4 个 属性 可 以 同时 应 用 于 一 个 元 
素 , 也 可 以 单独 或 部 分 应 用 于 同一 个 元 素 。 

在 盒子 模型 中 ,很 多 样式 需要 指定 方向 ,通常 会 有 4 个 属性 值 , 在 WXSS 文件 中 常 遵循 
TRBL 原则 和 相同 合并 原则 来 简化 代码 。 

1. TRBL 原则 

TRBL 原则 按照 top .right.bottom ,left 的 方向 来 设置 属性 。 

示例 代码 如 下 : 


padding ~— top:1rpx; 
padding — right :2rpx; 
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padding - bottom: 3rpx; 

padding - left :4rpx; 

上 述 代 码 遵循 了 TRBL 原则 ,按照 上 、 右 、 下 、 左 的 顺序 顺 时 针 的 方向 将 代码 合并 成 一 
行 , 其 效果 等 同 于 下 方 代码 : 


padding:1rpx 2rpx 3rpx 4rpx; 


2. 相同 合并 原则 

当 属 性 值 相同 的 时 候 , 可 以 按照 相同 合并 原则 简化 代码 。 
(1) 上 \、 下 ,左右 的 属性 值 相 同时 ,简化 为 1 个 值 。 
示例 代码 如 下 : 


padding:1rpx lrpx lrpx lrpx; 
padding:1rpx; 


(2) 上 、 下 和 左右 的 属性 值 分 别 相同 时 ,简化 为 2 个 值 。 
示例 代码 如 下 : 


padding:1rpx 2rpx lrpx 2rpx; 
padding:1rpx 2rpx; 


(3) 左右 的 属性 值 相同 时 ,简化 为 3 个 值 。 
示例 代码 如 下 


padding:1rpx 2rpx 3rpx 2rpx; 
padding:1rpx 2rpx 3rpx; 


4.4.2 盒子 模型 属性 


1. width 与 height 
盒子 模型 使 用 width 和 height 定义 内 容 区 域 的 大 小 。 除 此 之 外 还 可 以 通过 max- 
height、min-height 设置 最 大 高 度 和 最 小 高 度 , 属 性 如 表 4.3 所 示 。 


表 4.3 width 和 height 属性 


属 性 说 明 CSS 版 本 
height 设置 元 素 的 高 度 1 
max-height 设置 元 素 的 最 大 高 度 2 
max-width 设置 元 素 的 最 大 宽度 2 
min-height 设置 元 素 的 最 小 高 度 2 
min-width 设置 元 素 的 最 小 宽度 2 
width 设置 元 素 的 宽度 1 


2. padding 与 margin 
padding 指 内 边 距 , 即 内 容 与 边框 之 间 的 部 分 。 内 边 距 的 属性 有 4 种, 分别 为 padding- 
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top、padding-right、padding-bottom 和 padding-left, 其 属性 值 可 以 是 像素 ,也 可 以 是 百分比 ， 
通过 设置 内 边 距 可 以 控制 内 容 与 边框 的 间隔 。 

margin 指 外 边 距 , 主要 用 于 设置 元 素 之 间 的 距离 。 外 边 距 的 属性 有 4 种 ,分 别 为 
margin-top margin-right margin-bottom ,margin-left, 其 使 用 方法 与 内 边 距 类 似 。padding 
与 margin 的 属性 如 表 4.4 所 示 。 


表 4.4 padding 和 margin 属性 


属 性 说 明 CSS 版 本 
padding 在 一 个 声明 中 设置 所 有 内 边 距 属性 1 
padding-top 设置 元 素 的 上 内 边 距 1 
padding-right 设置 元 素 的 右 内 边 距 1 
padding-bottom 设置 元 素 的 下 内 边 距 1 
padding-left 设置 元 素 的 左 内 边 距 1 
margin 在 一 个 声明 中 设置 所 有 外 边 距 属 性 1 
margin-top 设置 元 素 的 上 外 边 距 1 
margin-right 设置 元 素 的 右 外 边 距 i 
margin-bottom 设置 元 素 的 下 外 边 距 和 
margin-left 设置 元 素 的 左 外 边 距 1 

3. border 


边框 是 内 容 与 外 部 填充 的 边界 ,使 用 边框 属性 可 以 设置 边框 的 样式 ,常见 属性 如 表 4.5 
所 示 。 


表 4.5 border 属性 
属 性 说 上 明 CSS 版 本 
border 在 一 个 声明 中 设置 所 有 的 边框 属性 
border-color 设置 四 条 边框 的 颜色 1 
border-style 设置 元 素 四 条 边框 的 样式 1 
border width 设置 四 条 边框 的 宽度 1 
border-radius 设置 四 条 边框 的 边 角 形 状 3 
outline 在 一 个 声明 中 设置 所 有 的 轮廓 属性 2 


4.5 元 素 类 别 


小 程序 页 面 布局 是 指 页 面 元 素 在 页 面 中 的 显示 位 置 ,而 页 面 元 素 与 其 他 页 面 元 素 之 间 
的 位 置 关系 会 决定 该 页 面 元 素 在 页 面 中 的 显示 位 置 。 所 以 在 学 习 小 程序 的 页 面 布 局 之 前 ， 
开发 者 需要 掌握 页 面 元 素 的 分 类 。 根 据 展示 特点 的 不 同 , 页 面 元 素 分 为 块 级 元 素 . 行 内 元 
素 、 内 联 块 级 元 素 3 种 。 
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4.5.1 块 级 元 素 


块 级 元 素 (block element) 是 一 种 以 块 状 方式 展示 的 容器 ,高度 和 宽度 均 可 设置 ,默认 宽 
度 为 100 % ,默认 占 一 行 的 高 度 。 在 一 行 中 两 个 块 级 元 素 无 法 并 列 排放 (float 浮动 后 除外 ， 
详 见 4.8 节 ), 两 个 块 级 元 素 连续 出 现时 ,会 在 页 面 中 自动 换行 显示 。 块 级 元 素 常 作为 页 面 
布局 的 组 织 结构 , 内 部 可 以 嵌 套 块 级 元 素 和 行内 元 素 ,小 程序 中 < view > 容器 默认 为 块 级 元 
素 , 内 部 可 椒 入 < text >< image > 等 。 通 过 设置 属性 display: block 能 够 将 元 素 设置 为 块 级 
元 素 。 

[ 贺 4-1 块 级 元 素 展示 特点 小 案例 ,运行 效果 如 图 4.5 所 示 。 


图 4.5 ” 块 级 元 素 展示 特点 
pages/block/block.wxml 文件 代码 如 下 : 


< view class = "red"> 第 1 个 块 级 元 素 </view> 

< view class = "blue"> 第 2 个 块 级 元 素 </view> 
<view class = "green"> 第 3 个 块 级 元 素 </view> 
<view class = "gray"> 第 4 个 块 级 元 素 </view> 


pages/block/block.wxss 文件 代码 如 下 : 


.red { 

background — color: red; 
} 
.blue { 
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background - color: blue; 
} 
.green { 

background - color: green; 
} 
.gray { 

background — color: gray; 
} 


view { 
display: block; height: 200rpx; border: 1px solid black; 


【代码 讲解 】 通过 设置 属性 display: block ,使 得 < view > 容器 为 块 级 元 素 ( 默 认为 块 级 
元 素 可 省 略 ) ,宽度 设置 为 200rpx, 每 个 < view > 容器 独占 一 行 , 默 认 宽 度 100% 和 父 元 素 宽 
度 一 致 ,后 面 的 < view > 容器 位 于 下 一 行 。 


4.5.2 ”行内 元 素 

行内 元 素 (inline element) 一 般 艇 套 在 块 级 元 素 中 使 用 , 它 只 能 容纳 文本 或 者 其 他 行内 
元 素 ,高 度 和 宽度 均 不 可 设置 ,WXML 的 < text > 就 是 行内 元 素 。 

[ 贺 4-2 行内 元 素 展示 特点 小 案例 ,运行 效果 如 图 4.6 所 示 。 


视频 讲解 


图 4.6 行内 元 素 展示 特点 


134 


第 4 章 ”样式 与 布局 


pages/inline/inline.wxml 文件 代码 如 下 : 


<view class = "red"> 第 一 个 行内 元 素 </view> 

< view class = "blue"> 第 二 个 行内 元 素 </view> 
< view class = "green"> 第 三 个 行内 元 素 </view> 
< view class = "gray"> 第 四 个 行内 元 素 </view> 


pages/inline/inline.wxss 文件 代码 如 下 : 


.red { 

background - color: red; 
} 
.blue { 

background - color: blue; 
} 
.green { 

background - color: green; 
} 
.gray { 

background - color: gray; 
} 
view { 

display: inline; border: 1px solid black; 
} 


【代码 讲解 】 通过 设置 属性 display: inline, 使 < view > 容器 变 为 行内 元 素 ,宽度 为 内 部 
文字 的 宽度 ,每 个 < view > 容器 并 排 在 同一 行 , 当 超过 父 容器 宽度 时 会 换行 显示 。 


4.5.3 内 联 块 级 元 素 


内 联 块 级 元 素 (inline-block element) 同 时 具备 块 级 元 素 和 行内 元 素 的 特点 ,多 个 内 联 
块 级 元 素 可 以 并 列 在 同一 行 ,并 且 高 度 和 宽度 都 可 以 设置 。 例 如 , WXML 中 的 < image > 是 
内 联 块 级 元 素 。 通 过 设置 属性 display:inline-block 能 够 将 元 素 设 置 为 内 联 块 级 元 素 。 

贺 +3 内 联 块 级 元 素 展示 特点 小 案例 ,运行 效果 如 图 4.7 所 示 。 

pages/inline-block/inline-block.wxml 文件 代码 如 下 : 

<view class = "red"> 第 一 个 内 联 块 级 元 素 </view> 


< view class = "blue"> 第 二 个 内 联 块 级 元 素 </view> 


pages/inline-block/inline-block/block.wxss 文件 代码 如 下 : 


.red { 
background — color: red; 
} 
.blue { 
background — color: blue; 
} 


vien{ 
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display: inline - block; height: 300rpx; width: 300rpx; 
border: 1px solid black; 
4 


图 4.7 内 联 块 级 元 素 展示 特点 


【代码 讲解 】 通过 设置 属性 display: inline-block ,使 < view > 容器 变 为 内 联 块 级 元 素 ; 
宽度 和 高 度 均 设置 为 300rpx, 当 不 超过 父 容器 宽度 时 ,每 个 < view > 容器 并 列 排 在 同一 行 ; 
同时 具备 行内 元 素 及 块 级 元 素 的 特点 。 


4.6 flex 布局 


4.6.1 flex 基本 概念 


flex 是 Flexible Box 的 缩写 , 意 为 “弹性 布局 ”, 为 盒子 模型 提供 最 大 的 灵活 性 。 任 何 一 
个 容器 都 可 以 指定 为 flex 布局 。 示 例 代码 如 下 : 
.view { 
display: flex; 
} 
上 述 代码 中 将 < view > 组 件 设置 为 flex 布局 后 , 子 元 素 的 float、clear 和 vertical-align 属 
性 将 失效 。 采 用 flex 布局 的 容器 . 称 为 flex 容器 (flex container) 。 容 器 内 部 包含 的 子 容器 ， 
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称 为 flex 项 目 (flex item) ,简称 “项 目 ”。flex 布局 发 生 在 父 容器 和 子 容器 之 间 , 父 容器 需要 
有 flex 的 环境 ,只 有 设置 其 属性 display: flex 后 , 子 容器 才能 根据 自身 的 属性 来 布局 。 简 单 地 
说 ,就 是 如 果 父 容器 有 flex 的 环境 , 子 容器 就 可 以 瓜分 父 容器 的 空间 。 如 果 父 容器 没有 flex 
的 环境 ,那么 子 容器 就 无 法 使 用 flex 的 规则 来 使 用 父 容器 的 空间 。flex 模型 如 图 4.8 所 示 。 


1 四 
| 


flex container -| 
cross start Cross axis 


main axis 


flex item flex item 


i 
! 
| 
二 -main size--- cross size 


Cross end mainend -~ 
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图 4.8 flex 模型 


在 图 4.8 中 , 父 容器 默认 存在 两 根 轴 : 水 平 的 主轴 (main axis) 和 垂直 的 交叉 轴 (cross 
axis) 。 主 轴 的 开始 位 置 (与 边框 的 交叉 点 ) 叫 作 main start, 结 束 位 置 叫 作 main end; 交叉 
轴 的 开始 位 置 叫 作 cross start, 结束 位 置 叫 作 cross end; 单个 项 目 占据 的 主轴 空间 叫 作 
main size' 占 据 的 交叉 轴 空 间 叫 作 cross size。 项 目 默 认 沿 主轴 排列 ,默认 属性 为 flex- 
direction: row, 水 平 轴 从 左 向 右 , 交叉 轴 为 垂直 方向 自 上 而 下 ; 通过 设置 属性 flex- 
direction: column 能 够 将 主轴 与 交叉 轴 的 位 置 进 行 互 换 , 即 主轴 变 为 生 直 方向 的 自 上 而 下 ， 
交叉 轴 变 为 水 平方 向 的 从 左 向 右 。 在 flex 布局 中 ,通过 设置 容器 属性 来 控制 内 部 项 目的 排 
列 与 对 齐 方式 。 

flex 属性 如 表 4.6 所 示 。 


表 4.6 flex 属性 
属 性 说 明 默认 值 其 他 属性 值 
flex-direction 项 目的 排列 方向 row row-reverse| column| column-reverse 
flex-wrap 项 目 是 否 换行 nowrap wrap| wrap-reverse 
me 设置 项 目 在 主轴 方向 上 的 flex-end | center | space-between | space- 
justify-content 对 齐 方式 flex-start oa 
align-items td 交 双 才 太 同上 上 stretch center | flex-end | baseline | flex-start 
i 当 多 行 排 列 时 ,设置 行 项 目 tal flex-start| center| flex-end | space-between| 
在 交叉 轴 方 向 上 的 对 齐 方 式 space-around | space-evenly 
设置 项 目 在 主轴 上 的 排列 . 
order a 0 <integer> 
顺序 
flex-shrink 过 于 融 旧 在 十 名 止 六 出 的 E <number> 
收缩 比率 
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续 表 
属 性 说 上 明 默认 值 其 他 属性 值 
flex-grow 六 丈 在 圭 抽 而 放 正直 有 字 0 <number> 
间 的 项 目 
flex-basis 代替 项 目 宽 / 高 的 属性 auto < length > 
aad 设置 项 目 在 交叉 轴 上 的 对 flex-start | center | flex-end | baseline 
齐 方 式 |stretch 


flex 属性 分 为 容器 属性 和 项 目 属性 ,将 在 4.6.2 节 和 4.6.3 节 依 次 讲解 。 


4.6.2 flex 容器 属性 


1. flex-direction 属性 
flex-direction 属性 决定 主轴 的 方向 , 即 flex 弹性 盒子 内 部 项 目 在 主轴 的 排列 方向 。 
其 语法 格式 如 下 : 


,Container { 


flex- direction: row( 默 认 值 )| row- reverse | column | column - reverse; 


} 

对 应 的 属性 值 如 下 。 

。 row( 默 认 值 ) : 主轴 为 水 平方 向 ,起 点 在 左 端 。 
。 row-reverse: 主轴 为 水 平方 向 ,起 点 在 右 端 。 

。 column: 主轴 为 垂直 方向 ,起 点 在 顶端 。 

。 column-reverse: 主轴 为 垂直 方向 ,起 点 在 底 端 。 
贺 4-4 flex-direction 属性 小 案例 。 
pages/flex-direction/flex-direction.wxml 文件 代码 如 下 : 视频 讲解 


<view class = "flex ~ container"> 
<view class = "item"> 元 素 1 </view > 
< view class = " item"> 元 素 2 </view> 
< view class = "item"> 元 素 3 </view> 
</view> 


pages/flex-direction/flex-direction.wxss 文件 代码 如 下 : 


.flex— container { 
margin: 50rpx auto; width: 740rpx; 
height: 600rpx; border: lpx solid #000; 
display: flex; 
flex- direction: row; /x 更改 flex- direction 属性 ,从 row 依次 替换 为 row - reverse | column 
| column - reverse*/ 
} 
.item { 
width: 200rpx; height: 150rpx; 
line— height: 150rpx; border: 1px solid 并 000; 
text — align: center; background - color: skyblue; 
} 
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将 WXSS 文件 中 的 flex-direction 属性 依次 设置 为 row ,row-reverse column column- 
reverse,4 种 属性 值 对 应 的 效果 如 图 4.9 所 示 。 


(a) row( 默 认 ) (b) row-reverse 


100% [Em 


(c) column (d) column-reverse 


图 4.9 flex-direction 属性 示例 图 


了 3 
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2. flex-wrap 属性 

flex-wrap 属性 用 于 设置 flex 弹性 盒子 内 部 的 项 目 是 否 允许 项 目 换行 以 及 换行 时 的 方 
向 ,默认 情况 项 目 不 换行 。 

其 语法 格式 如 下 : 


.Container { 


flex- wrap: nowrap( 默 认 值 )| wrap | wrap - reverse; 


} 


对 应 的 属性 值 如 下 。 

。 nowrap: 不 允许 换行 , 当 容 器 中 所 有 项 目的 宽度 超过 父 容器 时 ,可 能 会 被 压缩 。 

。 wrap: 当 容 器 中 所 有 项 目的 宽度 超过 父 容器 时 ,允许 换行 排列 。 

。 wrap-reverse: 当 容 器 中 所 有 项 目的 宽度 超过 父 容器 时 ,换行 的 方向 
与 wrap 反 向 。 

[CES flex-wrap 属性 小 案例 。 

pages/flex-wrap/flex-wrap.wxml 文件 代码 如 下 : 


视频 讲解 


<view class = "flex— container"> 
<view class = "item"> 元 素 1 </view> 
< view class = "item"> 元 素 2 </view> 
< view class = "item"> 元 素 3 </view> 
< view class = "item"> 元 素 4</view> 
</view> 


pages/flex-wrap/flex-wrap.wxss 文件 代码 如 下 : 


.flex ~ container { 

margin: 50rpx auto; width: 740rpx; 

height: 600rpx; border: lpx solid #000; 

display: flex; flex- direction: row; 

flex 一 wrap: nowrap; /* 更 改 flex- wrap 属性 ,把 nowrap 依次 替换 为 wrap|wrap - reversex / 
} 
.item { 

width: 200rpx; height: 150rpx; 

line— height: 150rpx; border: lpx solid #000; 

text ~ align: center; background— color: skyblue; 


} 


将 WXSS 文件 中 的 flex-wrap 属性 依次 替换 为 nowrap、wrap、wrap-reverse,3 种 属性 
值 对 应 的 效果 如 图 4.10 所 示 。 
3. justify-content 属性 
justify-content 属性 用 于 设置 flex 弹性 盒子 内 部 的 项 目 在 主轴 方向 上 的 对 齐 方式 。 
其 语法 格式 如 下 : 
.container { 
justify content: flex- start( 默 认 值 ) | center | flex- end | space- between | space- around 
| space — evenly; 


} 
对 应 的 属性 值 如 下 。 
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元 素 1 | 元 紊 2 | 元 率 3 | 和 4 元 素 1 元 素 2 元 素 3 
元 素 4 
元 紊 4 
元 素 1 | 元 素 2 | 元 素 3 
(a) nowrap (默认 ) (b) wrap (c) wrap-reverse 
图 4.10 flex-wrap 属性 示例 图 
。 flex-start: 项 目 对 齐 于 主轴 起 点 ,项目 之 间 不 留 空隙 。 


。 center: 项 目 在 主轴 上 居中 排列 ,位 于 容器 的 中 心 ,项 目 之 间 不 留 空隙 。 

。 flex-end: 项 目 对 齐 于 主轴 终点 ,项目 之 间 不 留 空隙 。 

。 space-between: 项 目 间距 相等 ,第 一 个 和 最 后 一 个 项 目 分 别 靠 在 主轴 的 起 点 和 终 

。 space-around: 第 一 个 项 目 离 主轴 的 起 点 和 最 后 一 个 项 目 离 主轴 的 终点 的 距离 是 中 
间 相 邻 项 目 间距 的 一 半 。 

。 space-evenly: 第 一 个 项 目 离 主轴 起 点 以 及 最 后 一 个 项 目 离 主轴 的 终点 的 距离 以 及 
中 间 相 邻 项 目 间距 均 相 等 。 

圆 4- justify-content 属性 小 案例 。 

pages/justify-content/justify-content.wxml 文件 代码 如 下 : 


< View class = "flex — container"> 让 Ey 

item"> 元 素 1 </view> 

item"> 元 素 2 </view> 视频 讲解 
< view class = " item"> 元 素 3 </view > 

</view> 


< view clas 


<view class 


pages/justify-content/justify-content.wxss 文件 代码 如 下 : 


.flex— container { 
margin: 50rpx auto; width: 740rpx; 
height: 600rpx; border: 1px solid #000; 
display: flex; flex- direction: row; 
flex— wrap: wrap; 
justify- content: flex- start; /* 更 改 justify - content 属性 ,从 flex - start 依次 替换 为 
center | flex— end | space - between | space— around | space— evenly*/ 
} 
.item { 
width: 200rpx; height: 150rpx; 
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line - height: 150rpx; border: 1px solid #000; 
text ~ align: center; background ~— color: skyblue; 
} 
将 WXSS 文件 中 的 justify-content 属性 依次 替换 为 flex-start、center,flex-end、 space- 
between 和 space-around、space-evenly,6 种 属性 值 对 应 的 效果 如 图 4.11 所 示 。 


(a) flex-start( 默 认 ) (b) center (c) flex-end 


(d) space-between (e) space-around (f) space-evenly 


图 4.11 justify-content 属性 示例 图 


4. align-items 属性 
align-items 属性 用 于 设置 flex 弹性 盒子 内 部 的 项 目 在 交叉 轴 方向 上 的 对 齐 方式 。 
其 语法 格式 如 下 : 
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.container { 
align- items: stretch( 默 认 值 )| flex- start | center |flex- end | baseline; 

} 

对 应 的 属性 值 如 下 。 

。 stretch: 当 项 目 大 小 未 设置 时 项 目 会 被 拉 伸 至 填 满 交叉 轴 。 

。 flex-start: 项 目 对 齐 于 交叉 轴 起 点 。 

。 center: 项 目 在 交叉 轴 居 中 对 齐 。 

。 flex-end: 项 目 对 齐 于 交叉 轴 终 点 。 

。 baseline: 项 目 对 齐 于 基线 上 ,未 设置 基线 时 等 同 于 flex-start。 
圆 4-7 align-items 属性 小 案例 。 
pages/align-items/align-items.wxml 文件 代码 如 下 : 
<view class = "flex- container"> 

< view class = "item"> 元 素 1 </view> 
< view class = "item"> 元 素 2 </view> 


< view class = " item"> 元 素 3 </view> 
</view> 


pages/align-items/align-items.wxss 文件 代码 如 下 : 


.flex — container { 
margin: 50rpx auto; 
width: 740rpx; 
height: 600rpx; 
border: 1px solid #000; 
display: flex; flex- direction: row; 
flex— wrap: no— wrap; 
align— items: stretch /* 更 改 align - items 属性 ,从 stretch 依次 替换 为 flex- start | 
center | flex—- endx / 


} 


.item { 
width: 200rpx; 
height: 100rpx; /* 当 align- items 的 属性 值 为 stretch, 删 掉 height 属性 * / 


line— height: 100rpx; 
border: 1px solid #000; 
text ~ align: center; background - color: skyblue; 

} 

将 WXSS 文件 中 的 align-items 属性 依次 替换 为 stretch、flex-start、center,flex-end, 当 
替换 为 stretch 时 需要 将 设置 项 目 尺寸 的 代码 删除 ,不 设置 项 目的 高 度 。4 种 属性 值 对 应 的 
效果 如 图 4.12 所 示 。 

5. align-content 属性 

align-content 属性 用 于 设置 flex 弹性 盒子 内 部 的 项 目 进行 多 行 排列 时 ,在 交叉 轴 方 向 
上 的 对 齐 方 式 。 

其 语法 格式 如 下 : 


.container { 
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align-items 属 性 


(a) stretch( 默 认 ) (b) flex-start 


(c) center (d) flex-end 


图 4.12 align-items 属性 示例 图 
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align 一 content: | stretch( 默 认 值 )| flex- start | center | flex- end | space between | space— 
around | space — evenly; 


} 


对 应 的 属性 值 如 下 。 

。 stretch: 未 设置 项 目 大 小 时 将 项 目 拉 伸 至 填 满 交叉 轴 。 

。 flex-start: 项 目 在 交叉 轴 起 点 对 齐 。 

。 center: 项 目 在 交叉 轴 居 中 对 齐 。 

。 flex-end: 项 目 在 交叉 轴 终 点 对 齐 。 

。 space-between: 行 间距 相等 , 首 行 与 尾行 靠 在 交叉 轴 起 点 和 交叉 轴 终 点 。 

。 space-around: 行 间距 相等 , 首 行 离 交 叉 轴 起 点 和 尾行 离 交 叉 轴 终 点 的 距离 为 行 间 
距 的 一 半 。 

。 space-evenly: 首 行 离 交 叉 轴 起 点 和 尾行 离 交叉 轴 终 点 的 距离 与 行 间距 相等 。 

注意 : 多 行 排列 时 需要 设置 flex-wrap 属性 值 为 wrap 允许 换行 。 

加 4-8 align-content 属性 小 案例 。 

pages/align-content/align-content.wxml 文件 代码 如 下 : 


<view class = "flex— container"> 
<view class = "item a"> 元 素 1 </view> 
< view class = "item b"> 元 素 2 </view> Ott 
<view class = "item c"> 元 素 3</view> 
< view class = "item b"> 元 素 4</view> 视频 讲解 
< view class = "item a"> 元 素 5 </view> 

</view> 


pages/align-content/align-content.wxss 文件 代码 如 下 : 


.flex— container { 
margin: 50rpx auto; 
width: 740rpx; 
height: 600rpx; 
border: 1px solid #000; 
display: flex; flex- direction: row; 
flex— wrap: wrap; 
align - content: stretch; /x 更改 align - content 属性 ,从 Stretch 依次 替换 为 flex - start| 
center | flex- end | space - between | space— around | space- evenly*/ 
} 
.item { 
height: 100rpx; /* 当 align - items 的 属性 值 蔡 换 为 stretch, 删 掉 height 属性 * / 
line — height: 100rpx; 
border: 1px solid #000; 
text 一 align: center; 
background — color: skyblue; 
} 
和 
width: 300rpx; 
} 
a 
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width: 350rpx; 
} 
“起 

width: 400rpx; 
} 


将 WXSS 文件 中 的 align-content 属性 依次 替换 为 stretch,flex-start、center,flex-end、 
space-between、space-around 和 space-evenly, 当 蔡 换 为 stretch 时 需要 将 height 属性 删 掉 ， 
不 设置 项 目的 高 度 。7 种 属性 值 对 应 的 效果 如 图 4.13 所 示 。 


下 


(a) stretch( 默 认 ) (b) flex-start (c) center 


(d) flex-end (e) space-between (f) space-around 


图 4.13 align-content 属性 示例 图 
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(g) space-evenly 


图 4.13 ( 续 ) 


4.6.3 flex 项 目 属性 


1. order 属性 

order 属性 用 于 设置 项 目 在 主轴 方向 上 的 排列 顺序 ,默认 值 为 0, 容 器 中 的 项 目 会 按照 
数值 从 小 到 大 排列 。 

其 语法 格式 如 下 : 


.item { 
order: < integer >; 


} 


[ 圆 4-9 order 属性 小 案例 ,运行 效果 如 图 4.14 所 示 。 
pages/order/order.wxml 文件 代码 如 下 : 


<view class = "flex— container"> 
<view class = "item a"> 元 素 1 </view> 
<view class = " item b"> 元 素 2 </view> 
< view class = "item c"> 元 素 3 </view> 
</view> 


pages/order/order.wxss 文件 代码 如 下 : 


.flex— container { 
margin: 50rpx auto; 
width: 740rpx; 
height: 600rpx; 
border: 1px solid #000; 
display: flex; 
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flex- direction: row; 
} 
.iten { 
width: 200rpx; 
height: 150rpx; 
line— height: 150rpx; 
border: 1px solid #000; 
text ~ align: center; 
background - color: skyblue; 


.af 
order: 1; 


图 4.14 order 属性 效果 图 


将 容器 中 主轴 方向 设置 为 水 平 从 左 到 右 ,3 个 项 目的 order 值 分 别 为 1.2、3, 按 照 从 小 
到 大 的 顺序 依次 排列 。 

2. flex-shrink 属性 

flex-shrink 属性 用 于 设置 项 目的 收缩 比率 , 当 超出 主轴 方向 上 父 容器 的 宽度 ,按照 比例 
对 项 目 进行 压缩 。 

其 语法 格式 如 下 : 


| 148 


第 4 章 ”样式 与 布局 


.item { 
flex- shrink: 1( 默 认 值 )| < number >; 
} 
flex-shrink 的 默认 值 为 1, 如果 没 有 定义 该 属性 ,将 会 自动 按照 默认 值 进行 压缩 。 
压缩 总 权重 的 计算 公式 如 下 : 
压缩 总 权重 一 长 度 1X 收 缩 因 子 1 十 长 度 2X 收缩 因子 2 十 … 十 长 度 NX 收缩 因子 N 
被 移 除 溢出 量 的 计算 公式 如 下 : 
被 移 除 溢出 量 一 原 长 度 关 溢出 长 度 关 收缩 因子 /压缩 总 权重 
被 压缩 后 的 长 度 的 计算 公式 如 下 : 
被 压缩 后 的 长 度 = 原 长 度 一 被 移 除 溢出 量 
以 水 平方 向 为 例 , 假 设 有 3 个 项 目 a、b、c 宽度 均 为 300rpx, 项 目的 收缩 因子 分 别 为 1、2 
和 3。 
WXSS 文 件 中 : 
.al{ 
width: 300rpx; flex— shrink: 1; 
} 
.bf 
width: 300rpx; flex— shrink: 2; 
} 


a 300rpx; flex- shrink: 3; 

} 

假设 父 容器 宽度 为 600rpx, 主 轴 水 平 从 左 向 右 ,3 个 项 目的 宽度 均 为 300rpx, 会 导致 洲 
出 300rpx, 现 计算 每 个 容器 被 压缩 后 的 实际 长 度 。 

首先 计算 压缩 总 权重 : 

压缩 总 权重 : 300X1 十 300X2 十 300X3 王 1800rpx 

然后 计算 每 个 容器 被 移 除 的 溢出 量 : 

a 被 移 除 溢 出 量 : 300 X (300X1/1800) 守 50rpx 

b 被 移 除 溢 出 量 : 300X (300X2/1800) 守 100rpx 

c 被 移 除 溢 出 量 : 300X(300X3/1800)=150rpx 

最 后 计算 每 个 容器 被 压缩 后 的 宽度 : 

a 被 压缩 后 的 宽度 : 300 一 50 二 250rpx 

b 被 压缩 后 的 宽度 : 300 一 100 王 200rpx 

c 被 压缩 后 的 宽度 : 300 一 150 王 150rpx 

由 上 例 可 以 看 出 : 收缩 因子 不 同 , 每 个 容器 被 压缩 后 的 宽度 也 不 相同 ， 回路 
收缩 因子 数值 越 大 ,被 移 除 溢出 量 越 大 。 

[ 圆 4-10 flex-shrink 属性 小 案例 ,运行 效果 如 图 4.15 所 示 。 

pages/flex-shrink/flex-shrink.wxml 文件 代码 如 下 : 


<view class = "flex— container"> 
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< view class = " item a"> 元 素 1 </view> 

< view class = " item b"> 元 素 2 </view> 

< view class = " item c"> 元 素 3 </view> 
</view> 


图 4.15 flex-shrink 属性 示例 图 
pages/flex-shrink/flex-shrink.wxss 文件 代码 如 下 : 


.flex— container { 
margin: 50rpx auto; 
width: 600rpx; 
height: 600rpx; border: lrpx solid #000000; 
display: flex; flex- direction: row; flex— wrap: nowrap; 
} 
.item { 
height: 100rpx; 
line— height: 100rpx; 
text 一 align: center; 
border: lrpx solid #000000; 
background - color: skyblue; 
} 
x 
width: 300rpx; flex— shrink: 1; 
} 
.bf 
width: 300rpx; flex— shrink: 2; 
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width: 300rpx; flex— shrink: 3; 


容器 被 压缩 前 后 的 对 比如 图 4.16 所 示 。 


容器 600rpx 溢出 300rpx 
元 素 1 元 素 2 元 素 1 元 素 2 元 素 3 
300rpx 300rpx 300rpx 250rpx 200rpx 150rpx 
(a) 容器 被 压缩 前 (b) 容器 被 压缩 后 


图 4.16 容器 被 压缩 前 后 的 对 比 图 


3. flex-grow 属性 
flex-grow 属性 用 于 设置 项 目的 扩张 比率 。 当 项 目 在 主轴 方向 上 留 有 剩余 空间 时 ,通过 


对 项 目 按照 比例 扩张 来 覆盖 剩余 空间 。 


其 语法 格式 如 下 : 


item { 
flex- grow: 0( 默 认 值 )| < number >; 
} 
flex-grow 的 默认 值 为 0, 如 果 没 有 定义 该 属性 ,项 目 不 扩 张 。 
扩张 量 的 计算 公式 如 下 : 
扩张 量 = 剩 余 空 间 /( 扩 张 因子 1 十 扩张 因子 2 十 … 十 扩张 因子 N) 
被 扩张 后 长 度 的 计算 公式 如 下 : 
被 扩张 后 长 度 王 原 长 度 十 扩张 单元 多 扩 张 因 子 N 
以 水 平方 向 为 例 ,假设 有 3 个 项 目 a、b、c 宽度 均 为 200px, 项 目的 扩张 因子 分 别 为 1、 


2、3。 


WXSS 文件 中 : 


.af 

width: 200px; flex— grow: 1; 
} 
.bf 

width: 200px; flex— grow: 2; 
} 
| 

width: 200px; flex— grow: 3; 
} 


假设 父 容器 宽度 为 600rpx,3 个 项 目的 宽度 均 为 100rpx, 会 导致 剩余 空间 为 300rpx, 现 


计算 每 个 容器 被 扩张 后 的 实际 长 度 。 


首先 计算 扩张 量 : 300/ (1 十 2 十 3) 二 50rpx 
然后 计算 每 个 容器 的 被 扩张 量 : 

a 被 扩张 量 : 50X1 一 50rpx 

b 被 扩张 量 : 50 尖 2 一 100rpx 
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c 被 扩张 量 : 50X3 王 150rpx 
最 后 计算 每 个 容器 被 扩张 后 的 宽度 : 

a 被 扩张 后 的 宽度 ; 100 十 50 王 150rpx 

b 被 扩张 后 的 宽度 : 100 十 100 二 200rpx 

c 被 扩张 后 的 宽度 : 100 十 150 王 250rpx 

由 上 例 可 以 看 出 : 扩张 因子 不 同 ,每 个 容器 被 扩张 后 的 宽度 也 不 相同 ,扩张 因子 数值 越 
大 ,被 扩张 量 越 大 。 

[ 圆 4-11 flex-grow 属性 小 案例 ,运行 效果 如 图 4.17 所 示 。 


视频 讲解 


图 4.17 flex-grow 属性 示例 图 


pages/flex-grow/flex-grow.wxml 文件 代码 如 下 : 


< view class = "flex ~ container"> 
< view class = "item a"> 元 素 1 </view> 
< view class = "item b"> 元 素 2 </view> 


< view class = " item c"> 元 素 3 </view> 
</view> 


pages/flex-grow/flex-grow.wxss 文件 代码 如 下 : 


.flex— container { 
margin: 50rpx auto; width: 600rpx; 
height: 600rpx; border: 1rpx solid #000000; 
display: flex; flex- direction: row; 
} 
.item { 
height: 100rpx; line- height: 100rpx; 
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text — align: center; border: lrpx solid #000000; 
background - color: skyblue; 
} 
> 
width: 100rpx; flex— grow: 1; 
} 
| 
width: 100rpx; flex- grow: 2; 
} 
width: 100rpx; flex— grow: 3; 
} 


容器 被 扩张 前 后 的 对 比如 图 4.18 所 示 。 


容器 600rpx 容器 600rpx 
元 素 1 元 素 2 元 素 3 元 素 1 元 素 2 元 素 3 
300rpx 
100rpx 100rpx 100rpx 150rpx 200rpx 250rpx 
(a) 容器 被 扩张 前 (b) 容器 被 扩张 后 


图 4.18 容器 被 扩张 前 后 的 对 比 图 


4. flex-basis 属性 
flex-basis 属性 用 于 代替 主轴 方向 上 项 目的 宽 或 高 。 
其 语法 格式 如 下 : 
.item { 
flex 一 basis: auto( 默 认 值 )| < number > 
} 
对 应 的 属性 值 如 下 。 
。 当 容 器 属性 设置 为 flex-direction: row 或 flex-direction: row-reverse 时 ,如 果 flex- 
basis 和 width 属性 同时 存在 数值 时 ,flex-basis 会 代替 width 属性 。 
。 当 容 器 属性 设置 为 flex-direction: column 或 flex-direction: column-reverse 时 ,如 
果 flex-basis 和 height 属性 同时 存在 数值 时 ,flex-basis 会 代替 height 属性 。 
。 数值 的 优先 级 高 于 auto, 如 果 flex-basis 属性 值 为 auto, 当 项 目 设置 了 高 度 或 宽度 时 
会 取代 auto。 
[ 圆 4-12 flex-basis 属性 小 案例 ,运行 效果 如 图 4.19 所 示 。3 个 项 目 
的 宽度 均 设置 为 300rpx, 通 过 对 第 一 个 项 目 设置 属性 flex-basis: 200rpx 使 
其 宽度 变 为 200rpx, 如 图 4.20 所 示 。 
pages/flex-basis/flex-basis.wxml 文件 代码 如 下 : 


< view class = "flex— container"> 
< view class = "item a"> 元 素 1 </view> 
< view class = " item b"> 元 素 2 </view> 
< view class = "item c"> 元 素 3 </view> 


</view> 
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项 目 1 项 目 2 项 目 3 
200rpx 300rpx 300rpx 
图 4.19 ”flex-basis 属性 示例 图 图 4.20 项 目 宽度 示例 图 


pages/flex-basis/flex-basis/wxss 文件 代码 如 下 : 


.flex— container { 
margin: 50rpx auto; width: 740rpx; 
height: 600rpx; border: lpx solid #000; 


display: flex; flex- direction: row; 
.item { 
height: 100rpx; line— height: 100rpx; 
.aif 


width: 300rpx; flex- basis: 200rpx; 


.bf{ 
width: 300rpx; 


> 
width: 300rpx; 


5. align-self 属性 


align-self 属性 用 于 单独 为 flex 弹性 盒子 内 部 的 项 目 设置 在 交叉 轴 方 向 上 的 对 齐 方式 ， 
其 属性 会 覆盖 容器 的 align-items。 其 语法 格式 如 下 : 


.iten { 
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align- self: auto (默认 值 )| stretch | flex- start | center | flex- end | baseline; 
} 
对 应 的 属性 值 如 下 。 
。 auto: 默认 项 目 继承 父 容器 设置 的 align-items 的 属性 ,如 果 没 有 设置 ,auto 替换 为 
stretch。 其 他 属性 与 align-items 一 致 。 
圆 4-13 align-self 属性 小 案例 ,运行 效果 如 图 4.21 所 示 。 


en 


视频 讲解 


图 4.21 align-self 属性 示例 图 


pages/align-self/align-self.wxml 文件 代码 如 下 : 


<view class = "flex— container"> 
< view class = " item a"> 元 素 1 </view> 
< view class = " item b"> 元 素 2 </view> 
< view class = " item c"> 元 素 3 </view > 
< view class = " item d"> 元 素 4</view> 
</view> 


pages/align-self/align-self.wxss 文件 代码 如 下 : 


.flex— container { 
margin: 50rpx auto; 
width: 740rpx; 
height: 600rpx; 
border: 1px solid #000; 
display: flex; 


flex- direction: row; 
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.item { 
width: 200rpx; 
line— height: 100rpx; 
border: lpx solid #000; 
text 一 align: center; 
background - color: skyblue; 
} 
-af 
align- self: stretch; 
} 
‘bt 
height: 100rpx; 
align— self: flex- start; 
} 
区 
height: 100rpx; 
align— self: center; 
} 
st 
height: 100rpx; 
align— self: flex - end; 
} 
【代码 讲解 】 如 图 4.21 所 示 , 项 目 1 设置 属性 align-self: stretch, 并 且 不 能 设置 项 目 
的 高 度 否 则 属性 无 效 ; 项 目 2 设置 属性 align-self: flex-start 使 得 项 目 位 于 交叉 轴 顶 端 ; 项 
目 3 设置 属性 align-self: center 使 得 项 目 位 于 交叉 轴 中 间 ; 项 目 4 设置 属性 align-self: 
flex-end 使 得 项 目 位 于 交叉 轴 底 部 。 
align-self 属性 与 align-items 属性 的 区 别 在 于 : align-self 属性 单独 作用 于 某 一 项 目 ,可 
以 覆盖 align-items 属性 ; align-items 属性 作用 于 容器 中 所 有 的 项 目 。 


4.7 layer 布局 


在 4.6 节 flex 布局 中 已 介绍 ,flex 布局 能 够 对 容器 中 项 目 之 间 的 位 置 关系 进行 设置 ,不 
同 项 目 之 间 可 以 并 列 在 一 起 ,然而 元 素 之 间 的 位 置 关 系 没 有 涉及 相互 覆盖 。 在 对 小 程序 页 
面 进行 设计 时 , 当 需 要 实现 元 素 之 间 的 覆盖 以 及 定位 时 ,可 以 使 用 layer 布局 。 

layer 布局 基于 定位 的 思想 ,分 别 有 绝 对 定位 (position: absolute) .相对 定位 (position 
relative) 以 及 固定 定位 (position: fixed) 。 

1. 绝对 定位 

将 元 素 设 置 为 绝对 定位 ,首先 设置 元 素 的 属性 position: absolute, 该 元 素 会 相对 于 最 近 
的 一 个 具有 定位 属性 的 父 元 素 作为 参考 ,然后 通过 top .bottom ,left right 属性 设置 上 、 下 、 
左 、 右 的 偏 移 量 完成 绝对 定位 。 如 果 不 存在 具有 定位 属性 的 父 元 素 ,该 元 素 会 以 屏幕 左上 方 
的 节点 作为 参考 。 
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[ 圆 4-14 绝对 定位 小 案例 ,运行 效果 如 图 4.22 所 示 。 
pages/absolute/absolute.wxml 文件 代码 如 下 : 


< view> 使 用 绝对 定位 </view> 
pages/absolute/absolute.wxss 文件 代码 如 下 : 


View { 
width: 300rpx; height: 500rpx; position: absolute; left: 200rpx; 
top: 200rpx; background — color: skyblue; border: lpx solid #000000; 
} 


【代码 讲解 】 在 图 4.22 中 ,通过 设置 属性 left: 200rpx 和 top: 200rpx 使 < view > 容器 
相对 于 屏幕 左边 的 距离 为 200rpx, 相 对 于 屏幕 上 边 的 距离 为 200rpx, 实 现 了 绝对 定位 。 


图 4.22 绝对 定位 


2. 相对 定位 

相对 定位 表示 子 元 素 相 对 于 父 元 素 作 为 参考 的 一 种 定位 方式 , 子 元 素 设置 其 属性 
osition: absolute, 父 元 素 设置 其 属性 position: relative, 然 后 通过 top bottom ,left right 
属性 设置 上 .下 左右 的 偏 移 量 完成 相对 定位 。 

[加 4-15 相对 定位 小 案例 ,运行 效果 如 图 4.23 所 示 。 

pages/relative/relative.wxml 文件 代码 如 下 : 


< view class = "iteml"> 
< view class = " item2"> 使 用 相对 定位 </view> 
</view> 
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pages/relative/relative.wxss 文件 代码 如 下 : 


.itenml { 

position: relative; width: 700rpx; 

height: 400rpx; border: 1px solid #000; margin- top: 150rpx; 
} 
.item2 { 

position: absolute; width: 150rpx; 

height: 100rpx; left: 490rpx; top: 230rpx; 

background - color: skyblue; border: 1px solid #000000; 


图 4.23 相对 定位 


【代码 讲解 】 在 图 4.23 中 ,通过 设置 属性 left: 490rpx 和 top: 230rpx 使 < view > 容器 
相对 于 父 容器 左边 的 距离 为 490rpx, 相 对 于 父 容 器 上 边 的 距离 为 230rpx, 实 现 了 相对 定位 。 

3. 固定 定位 

固定 定位 用 于 将 元 素 固 定 在 屏幕 中 ,不 会 随 着 页 面 的 滚动 而 发 生 位 置 变化 ,需要 设置 其 
属性 position: fixed ,元 素 位 置 的 定位 与 绝对 定位 的 方式 类 似 , 不 同 之 处 在 于 元 素 会 始终 位 
于 屏幕 的 某 个 位 置 。 

[ 贺 4-16 固定 定位 小 案例 ,运行 效果 如 图 4.24 所 示 。 

pages/fixed/fixed.wxml 文件 代码 如 下 : 


< view class = "item"> 使 用 固定 定位 </view> 


pages/fixed/fixed.wxss 文件 代码 如 下 : 
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.iten { 
position: fixed; width: 90%; height: 130rpx; 
background - color: skyblue; margin- top: 1000rpx; 
border: 1px solid #000000; 

} 


图 4.24 ”固定 定位 


【代码 讲解 】 在 图 4.24 中 , 当 设 置 属性 为 position: fixed 时 ,容器 将 固定 在 页 面 中 ,并 
且 屏 幕 滚动 时 元 素 位 置 不 会 发 生 改 变 。 


4.8 float 布局 


块 级 元 素 独 占 一 行 ,如 果 需 要 两 个 块 级 元 素 并 排 显示 ,就 可 以 使 用 float( 浮 动 ) 布 局 , 默 
认 情 况 下 元 素 是 不 浮动 的 ,通过 设置 属性 float: left 表示 元 素 向 着 屏幕 左边 浮动 ,设置 属性 
float: right 表示 元 素 向 着 屏幕 右边 浮动 ,浮动 的 条 件 必须 是 子 元 素 的 总 宽度 小 于 父 容器 的 
宽度 。 

[加 4-17 float 布局 小 案例 ,运行 效果 如 图 4.25 所 示 。 

pages/float/float.wxml 文件 代码 如 下 : 


<view class = "left"> 左 浮动 </view> 
<view class = "left"> 左 浮动 </view> 
<view class = "left"> 左 浮动 </view> 
< view class = "right"> 右 浮动 </view> 
<view class = "right"> 右 浮动 </view> 视频 讲解 
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<view class = "right"> 右 浮动 </view> 


pages/float/float.wxss 文件 代码 如 下 : 


view { 
width: 150rpx; height: 250rpx; 
border: lpx solid # ffffff; background— color: skyblue; 
} 
.left { 
float: left; 
} 
.right { 
float: right; 
} 


图 4.25 float 布局 小 案例 


【代码 讲解 】 在 图 4.25 中 ,设置 3 个 < view > 容器 左 浮 动 , 并 排 显示 在 屏幕 左边 ,每 个 
< view > 容器 的 宽度 为 150rpx 加 上 1px 的 外 边框 后 ,宽度 超过 模拟 器 的 总 宽度 750rpx, 于 
是 后 面 3 个 < view > 容器 在 设置 了 右 浮动 后 .只 有 一 个 浮动 在 第 一 行 的 右边 ,后 面 两 个 并 排 
浮动 在 第 二 行 的 右 侧 。 


4.9 小 程序 布局 实战 


小 程序 常见 的 界面 布局 可 以 分 为 列表 式 、 转 盘 式 、 多 面板 以 及 标签 式 , 现 分 别 依次 进行 
讲解 。 
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4.9.1 列表 式 


列表 式 布 局 是 一 种 常见 的 排版 方式 ,其 排列 方式 为 由 上 而 下 垂直 排列 ， 


在 每 个 列表 元 素 当中 存放 内 容 , 示 例如 图 4.26 所 示 。 四 各 3 和 
[ 圆 4-18 列表 式 布局 小 案例 ,运行 效果 如 图 4.27 所 示 。 视频 讲解 
woove WeChats T57 100% 
电影 列表 小 志 例 .加 


流浪 地 球 


并 型 : 科幻 /动作 片 

SR: Hh ” 
主演 : 屈 生 要 手 光 党 

上 献 : 2019 年 


和 导演; 布 芋 思 .空格 me 
拉 洲 马 雷 克 需 否 宝 通 
上 器 ; 2019 年 


图 4.26 ”列表 式 示 例 图 图 4.27 电影 列表 小 案例 


pages/movie/movie.wxml 文件 代码 如 下 : 
<! -- 导航 标题 -- > 


< View class = "title"> 
< view class = "select"> 正 在 热 映 </view> 
< view class = "default"> 即 将 上 映 </view> 
</view> 
<! -- 轮 播 图 --> 
< view class = "haibao"> 
< swiper indicator — dots = "{{indicatorDots}}" autoplay = "{{autoplay}}" 
interval = "{ {interval}}"> 
< block wx:for = "{ {imgUrls}}"> 
< swiper ~ item> 
< image src = "{{item}}"></image> 
</swiper — item> 
</block> 
</swiper > 
</view> 
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<! -- 列表 元 素 --> 


< block wx:for="{{movies}}"> 
<view class = "list"> 
<view class = "pic"> 
< image src = "{{item. image}}"></image> 
</view> 
<view class = "movie"> 
<view class = "name">{ {item. name} }</view> 
< view>{{item. type} }</view > 
< view>{{item. director} }</view > 
< view>{{item.actor}}</view> 
< view >{{ item. showTime} }</view > 
</view> 
<view class = "btn"> 
< button > 观看 </button > 
</view> 
</view> 
<view class = "hr"></view> 
</block> 


pages/movie/movie.js 文件 代码 如 下 : 


Page({ 
data: { 

indicatorDots: true, 

autoplay: true, 

interval: 3000, 

imgUrls: [ 
"/images/haibao/haibaol. jpg", 
"/images/haibao/haibao2. jpg", 

], 


movies: [{ 
image: "/images/list/moviel. jpg", 
name:" 流 浪 地 球 "， 


type: "类 型 : 科幻 /动作 片 "， 
director: "导演 : 郭 帆 "， 
actor: "主演 : 届 楚 萧 李 光 洁 "， 
showTime: "上映 : 2019 年 "， 

}, 1 
image: "/images/list/movie2. jpg", 
name: "复仇 者 联盟 4"， 
type: "类型: 悬疑 /科幻 片 "， 
director: "导演 : 安东尼 :罗素 "， 
actor: "主演 : 小 罗伯特 - 唐 尼 克 里 斯 - 埃 文 斯 "， 
showTime: "上 映 : 2019 年 "， 

,A 
image: "/images/list/movie3. jpg", 
name:" 波 西 米 亚 狂 想 曲 "， 
type: "类 型 : 爱情 /喜剧 片 "， 
director: "导演 : 布 莱 恩 - 辛 格 "， 
actor: " 拉 米 马 雷 克 露 西 - 宝 通 "， 
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showTime: "上 映 : 2019 年 "， 
}] 
} 
}) 


pages/movie/movie.wxss 文件 代码 如 下 : 


/* 导航 样式 */ 
.title { 
display: flex; flex— direction: row; 
} 
/* 导航 选中 */ 
.select { 
font - size: 30rpx; width: 50 %; color: green; text - align: center; 
height: 100rpx; line— height: 100rpx; 
border - bottom: 2px solid green; 
} 
/* 导航 未 选中 * / 
.default { 
width: 40 %; font ~ size: 30rpx; text - align: center; 
height: 100rpx; line— height: 100rpx; 
} 
/* 轮 播 图 样式 * / 
swiper { 
height: 280rpx; 
} 
.haibao image { 
width: 100 %; height: 280rpx; 
} 
/* 列表 内 部 样式 * / 
-ist A 
display: flex; flex- direction: row; 


/* 图 片 样式 */ 
.pic image { 
width: 180rpx; height: 200rpx; padding: 10rpx; 


/* 电影 信息 样式 * / 
.movie { 
font - size: 24rpx; padding - top: 20rpx; line— height: 40rpx; color: #000; 


/* 电 影 名 称 样式 */ 
.name { 
font — size: 26rpx; font — weight: bold; 


/x* 按钮 位 置 */ 
.btn { 
position: absolute; right: 30rpx; margin— top: 140rpx; 


/* 按钮 样式 */ 
.btn button { 
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width: 100rpx; height: 50rpx; font - size: 20rpx; 
color: green; border: 1px solid green; 

} 

/* 分 隔 线 样式 * / 

height: 1px; width: 100%; background - color: #cce; 
opacity: 0.5; 

} 

【代码 讲解 】 页 面 布 局 思路 : 首先 设计 页 面 上 部 的 标题 ,利用 < swiper > 组 件 实现 图 
片 的 切换 效果 ; 然后 在 轮 播 图 下 方 放置 < view > 容器 ,设置 为 flex 布局 ,主轴 在 水 平方 向 
上 从 左 向 右 , 使 得 电影 图 片 、 影 片 介绍 信息 和 “观看 ”按钮 可 以 在 水 平方 向 上 排列 , 青 分 别 
设置 内 部 的 电影 图 片 、 电 影 信 息 以 及 按钮 的 样式 ; 最 后 通过 列表 演 染 实现 3 个 电影 的 
显示 。 

列表 式 布局 是 一 种 常见 的 布局 方式 ,读者 要 体会 到 整体 与 局 部 的 关系 ,整体 内 容 呈 现 垂 
直 向 下 排 布 ,列表 中 的 每 行内 容 都 通过 样式 的 设置 来 完成 布局 。 


4.9.2 ”转盘 式 


对 于 转盘 式 中 的 内 容 ,用 户 可 以 通过 左右 滑动 预览 每 个 元 素 ,示例 如 图 4.28 所 示 。 
[ 贺 4-19 转盘 式 布局 小 案例 ,运行 效果 如 图 4.29 所 示 。 


视频 讲解 


《流浪 地 球 》 根 据 刘 惑 欣 同名 小 说 改编 ， 故 事 设 定 在 2075 
年 ， 讲 述 了 太阳 即将 虹 灭 ， 已 经 不 适合 人 类 生存 ， 而 面 对 绝 
墙 ， 人 类 入 开启 “ 流 滨 地 球 ” 计 划 ， 试 图 这 着 地 球 一 起 进 高 太 
阳 系 ,寻找 人 类 新 家 园 的 故事 . 


电影 海报 


图 4.28 转盘 式 示例 图 图 4.29 电影 详情 小 案例 


164 


第 4 章 ”样式 与 布局 


pages/movie/movieDetail.wxml 文件 代码 如 下 : 


< view class = "bg"> 
<view class = "movie"> 
< view class = "pic"> 
<! -- 电影 图 片 ~-> 
< image src = "/images/one. jpg"></image> 
</view> 
<view class = "outer"> 
<! -一 电影 标题 --> 
<view class = "name"> 流 浪 地 球 </view> 
< view class = "item"> 中 国 | 2019 </view> 
< view class = "item"> 科 幻 /动作 片 </view> 
< view class = "item"> 郭 帆 </view > 
< view class = "item"> 届 楚 萧 李 光 洁 </view> 
</view> 
</view> 
</view> 
< view class = "detail"> 
<! -一 电影 详情 --> 
《流浪 地 球 ) 根 据 刘 慈 欣 同名 小 说 改编 ,故事 设 定 在 2075 年 ,讲述 了 太阳 即将 毁灭 ,已 经 不 适合 人 类 
生存 ,而 面 对 绝 境 , 人 类 将 开启 “流浪 地 球 ” 计 划 , 试图 带 着 地 球 一 起 逃离 太阳 系 ,寻找 人 类 新 家 园 的 
故事 。 
</view> 
<! 一 -分 隔 线 --> 
<view class = "hr"></view> 
<! 一 电影 海报 -> 
<view class = "zhinan"> 电 影 海 报 </view> 
< scroll — view scroll -x= "true"> 
<view class = "haibaoitem"> 
< image src = "/images/haibaol. jpg" style = "height:180rpx;width:250rpx"></image > 
</view> 
< view class = "haibaoitem"> 
< image src = "/images/haibao2. jpg" style = "height:180rpx;width:250rpx"></image > 
</view> 
< view class = "haibaoitem"> 
< image src = "/images/haibao3. jpg" style = "height:180rpx;width:250rpx"></image> 
</view> 
</scroll - view> 


pages/movie/movieDetail.wxss 文件 代码 如 下 : 


/* 背景 颜色 x*/ 
.bg { 
width: 100 %; background — color: #36648b; 
} 
/* 头 部 布局 * / 
.movie { 
display: flex; flex- direction: row; padding: 20rpx; 
} 


.pic image { 
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width: 200rpx; height: 300rpx; 
} 
/* 电影 信息 样式 */ 
.outer { 
margin: 10rpx 20rpx; 
} 
.name { 
color: #fff; margin— bottom: 20rpx; 
} 
.item { 
font - size: 24rpx; color: #fff; line— height: 50rpx; 
} 
/* 电影 简介 样式 * / 
.detail { 
font ~ size: 26rpx; line ~ height: 50rpx; 
margin: 20rpx; text — indent: lem; 
} 
/* 分 隔 线 样式 * / 
.hr { 
height: 20rpx; width: 100 %; 
background - color: #ccc; opacity: 0.2; 


.Zhinan { 
font - size: 40rpx; padding: 16rpx; 


scroll — view { 
height: 350rpx; width: 100 %; white— space: nowrap; 


/* 电影 海报 样式 * / 
.haibaoitem { 
padding: 10rpx; display: inline— block; 


【代码 讲解 】 本 例 中 的 电影 海报 部 分 包含 多 幅 图 片 ，< scroll-view > 组 件 设置 属性 
scroll-x 二 "true" 实 现 水 平方 向 的 滑动 区 域 ; < image > 组 件 通 过 父 组 件 < view > 设置 属性 
display 取 值 inline-block ,把 默认 是 块 级 元 素 的 < view > 组 件 修改 成 内 联 块 级 元 素 ,最 终 电影 
海报 图 片 能 够 实现 左右 滑动 的 效果 。 


4.9.3 多 面板 


在 微 信 小 程序 的 界面 中 ,多 面板 常用 于 信息 的 分 类 ,示例 如 图 4.30 所 示 。 
[ 贺 4-20 多 面板 布局 小 案例 ,运行 效果 如 图 4.31 所 示 。 
pages/tab/tab.wxml 文件 代码 如 下 : 


<! 一 分隔 线 -一 > 
<view class= "hr"></view> 
<! 一 输入 框 --> 


< input placeholder = "请 输入 商品 名 称 "></input > 
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< view class = "hr"></view> 
<view class = "content"> 
<view class = "left"> 
<! 一 左 侧 部 分 -一 > 


< scroll — view scroll -y= "true"> 


< block wx:for = "{{list}}"> 
<view>{{item} }</view> 
</block> 
</scroll - view> 
</view> 


<view class = "right"> 

<! 一 右 侧 部 分 --> 

< View class = "order"> 
<! -- 分 类 部 分 --> 
< view> 热 门 推荐 
< view> 生 活 热 搜 </view> 
< view> 专 场 推荐 </view> 

</view> 


</view> 
</view> 


男装 推荐 


女 靳 推荐 


家 用 电器 


运动 户外 


电脑 办 公 


体育 用 品 


美 枚 护肤 


图 4.30 多 面板 示例 图 图 4.31 多 面板 小 案例 


pages/tab/tab.js 文件 代码 如 下 : 


Bage({ 
data: { 
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list: [" 手 机 数码 ", "男装 推荐 ", "女装 推荐 ", "优选 水 果 "," 家 用 电器 "， "运动 户外 "， 
"电脑 办 公 "， "体育 用 品 "，" 美 妆 护 肤 "] 
}, 


}) 
pages/tab/tab.wxss 文件 代码 如 下 : 


/* 分 隔 线 样式 * / 
.hr { 
border: lpx solid # EEE9E9; 
width: 100 %; opacity: 0.6; 
} 
/* 输入 框 样式 * / 
input { 
margin: 15rpx 30rpx; border: 1px solid #ccc; 
border - radius: 50rpx; 
text ~ align: center; font - size: 32rpx; 
} 
/* 布局 样式 */ 
.content { 
display: flex; 
flex— direction: row; 
} 
/* 左边 样式 */ 
.left { 
width: 25 %; font 一 Size: 30rpx; 
} 
scroll - view { 
height: 90 %; 
} 
/x* 左边 元 素 样式 */ 
.left view { 
text ~ align: center; 
height: 100rpx; line— height: 100rpx; 
} 
/* 右边 样式 */ 
.right { 
width: 75 %; 
} 
/* 分 类 样式 */ 
.order { 
display: flex; flex- direction: row; 
text — align: center; 
padding: 20 rpx; 
} 
.Order view { 
width: 33 %; 
font - size: 32rpx; 
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【代码 讲解 】 页 面 布局 思路 : 页 面 上 部 放置 < input > 组 件 ,为 其 设置 相关 属性 完成 搜 
索 框 的 设计 ; 下 方 分 别 为 左右 两 个 部 分 ,放置 < view > 容器 ,设置 为 flex 布局 ,主轴 在 水 平方 
向 上 从 左 向 右 ,左边 部 分 宽度 设置 为 25% ,利用 < scroll-view > 组 件 及 列表 泻 染 完成 左边 的 
布局 ,右边 部 分 宽度 设置 为 75%% ,内 部 放置 3 个 < view > 容器 ,宽度 均 设置 为 33%; 最 后 完 
成 样式 的 设置 。 


4.9.4 标签 式 


在 微 信 小 程序 的 界面 中 ,通常 在 搜索 框 下 方 会 有 相关 的 标签 ,标签 示例 
如 图 4.32 所 示 。 
[ 贺 4-21 标签 式 布局 小 案例 ,运行 效果 如 图 4.33 所 示 。 


evee WeChals 331 100% 
标 等 小 本 人 。. © 
着 素 主 由 取消 


图 4.32 标签 示例 图 图 4.33 标签 小 案例 


pages/tag/tag.wxml 文件 代码 如 下 : 
<! -- 搜索 框 --> 


< view class = "search"> 

< view class = "searchBg"> 
<! -- 搜索 图 标 一 -> 
< image src = "/images/search. jpg" style= "width:50rpx;height:50rpx"></image> 
< input placeholder = "搜索 宝贝 "> </input > 

</view> 

<! -- 取消 按钮 -一 > 

< view class = "btn"> 取 消 </view> 


</view> 
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<! 一 分 隔 线 -一 > 


< view class = "hr"></view> 
< view class = "title"> 
< view class = "left"> 热 门 搜索 </view> 
< view class = "right"> 换 一 批 </view> 
</view> 
<! 一 标签 内 容 --> 
<view class = "tag"> 
<block wx:for = "{{labell}}"> 


<view>{{item} }</view> 


</block> 
</view> 
<! -- 标题 内 容 --> 
< view> 


< view class = "title"> 
< view class = "left"> 历 史 搜索 </view> 
</view> 
</view> 
<! 一 标签 内 容 -> 
< View class = "tag"> 
< block wx:for = "{{label2}}"> 
< view>{{f item}}</view> 
</block> 
</view> 


pages/tag/tag.js 文件 代码 如 下 : 


Page({ 
data: { 
label1: [" 手 机 "，" 女 鞋 "，" 果 冻 "，" 手 套 "，" 连 衣 裙 "，" 手 表 "，" 高 清 电 脑 屏 幕 "，" 篮 球 服 "]， 
label2: [" 衣 柜 "，" 电 饭 煲 "，" 洗 衣 机 "，" 家 具 "，" 连 衣 裙 "，" 小 米 "，" 华 为 荣耀 "，" 咖 啡 "] ， 
}, 
}) 


pages/tag/tag.wxss 文件 代码 如 下 : 
/* 搜索 框 样式 */ 


.search { 
display: flex; flex- direction: row; padding: 10rpx; 
} 
/* 搜索 框 背 景 样式 * / 
. searchBg { 
background - color: 井 e8e8ed; width: 80 %; 
display: flex; flex— direction: row; height: 60rpx; 
} 
/* 搜索 图 标 样式 x*/ 
. SearchBg image { 
margin: 10rpx; 
} 
/* 输 入 框 样式 */ 
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. SearchBg input { 
height: 60rpx; font — size: 30rpx; 
} 
/* 取消 按钮 样式 */ 
.btn { 
font - size: 26rpx; font - weight: bold; 
1line- height: 60rpx; margin— left: 24rpx; 
border: 1px solid #ccc; width: 100rpx; 
text — align: center; background — color: 井 e8e8ed; border - radius: 6rpx; 


} 

/* 分 隔 线 样式 */ 

.hr { 

border: 1px solid # eee9e9; opacity: 0.6; 

} 

/* 标题 样式 * / 

.title { 

display: flex; flex- direction: row; padding: 20rpx; 

} 

/* 热门 搜索 样式 * / 

.left { 

width: 80 %; font— size: 30rpx; 

} 

/* 换 一 批 样式 * / 

.right { 

width: 20 %; font 一 size: 25rpx; 
color: 井 ec3131; text -align: right; 

} 

/* 标签 布局 样式 * / 

.tag { 

padding — left: 20rpx; display: flex; 
flex— direction: row; flex— wrap: wrap; 

} 

/* 标签 样式 * / 

‘tag View { 

background - color: 井 e8e8ed; padding - left: 24rpx; 
padding ~ right: 24rpx; height: 50rpx; 

line— height: 50rpx; border ~ radius: 10rpx; 

text ~ align: center; font ~ size: 26rpx; 

margin — right: 20rpx; margin— bottom: 20rpx; 

} 

【代码 讲解 】〗 页 面 布 局 思路 : 页 面 的 上 部 放置 < view > 容器 ,设置 为 flex 布局 主轴 在 水 
平方 向 上 从 左 向 右 ,左边 放置 < view > 容器 ,用 于 增加 背景 色 以 及 设置 布局 样式 ,将 搜索 图 
标 <input > 组 件 以 及 “取消 ?按钮 放置 其 中 ; 搜索 框 下 方 的 “热门 搜索 ”和 “ 换 一 批 " 也 采用 
flex 布局 方式 ,标题 下 方 的 标签 每 个 元 素 水 平 向 右 排列 并 且 换 行 , 因 此 在 外 面 的 < view > 设 
置 为 flex 布局 ,主轴 在 水 平方 向 上 从 左 向 右 ,并 且 设 置 允 许 换行 显示 ,再 利用 列表 泻 染 完成 
数据 的 显示 ,最 终 根据 不 同 元 素 之 间 的 位 置 关 系 , 编 写 标签 内 部 的 样式 代码 。 
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4.10” 实 训 项 目 一 一 仿 京 东 首 页 小 案例 


为 了 加 深 读者 对 样式 与 布局 的 认识 ,本 实 训 项 目 设计 实现 仿 京 东 首 页 
小 案例 ,项 目 主 要 使 用 flex 布局 实现 各 个 栏目 的 排列 显示 ,同时 使 用 了 第 2 


有 章 关于 循环 泻 染 的 知识 点 。 项 目 执行 效果 如 图 4.34 所 示 。 
Os 人 "中国 联通 4G 下 午 1:04 @ 13% )$ 
视频 讲解 仿 京 东 购 物 “| © 
置 = a @ 9 
领 优惠 券 。 9.9 元 拼 。。 找 折扣 闪 购 京 豆 
4 中 
打卡 有 奖 。 京东 服饰 。 京东 生 鲜 。 京东 手机 。 全 部 频道 
人 现行 运动 百科 
图 4.34 仿 京 东 购物 小 程序 首页 
具体 实现 步骤 如 下 。 


(1) 打开 微 信 web 开发 者 工具 创建 项 目 。 


(2) 新 建 images 文件 夹 ,用 Adobe Fireworks 软件 将 界面 的 素材 图 片 截取 保存 。 
(3) 在 app.js 中 配置 项 目 属 性 和 底部 tabBar。 
(4) 新 建 jd-index 文件 ,进行 样式 与 布局 的 设计 。 
app.json 文件 代码 如 下 : 
{ 
"pages": [ 
"pages/jd — index/jd— index" 
], 
"window": { 
"backgroundTextStyle" : "light", 
"navigationBarBackgroundColor" : "#ffffff", 
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"navigationBarTitleText" :" 仿 京东 购物 "， 
"navigationBarTextStyle" : "black" 
}, 
"tabBar": { 
"color": "#4D4D4D", 
"selectedColor": "#FF0000", 
"borderStyle": "black", 
"at"s[ 
{ 
"selectedIconPath" : "icon/index0. png", 
"iconPath" : "icon/index. png", 


"pagePath" : "pages/jd- index/jd— index", 
"text": "首页 " 


}, 

下 
"selectedIconPath" : "icon/sort0.png"， 
"iconPath" : "icon/sort. png", 
"pagePath" : "pages/jd— index/jd- index", 
"text" : "分 类 " 

}, 

{ 
"selectedIconPath" : "icon/shop0. png", 
"iconPath" : "icon/shop. png", 
"pagePath" : "pages/jd- index/jd- index", 
"text" : "购物 圈 " 

} 

{ 
"selectedIconPath" : "icon/cart0.png"， 
"iconPath" : "icon/cart. png", 
"pagePath" : "pages/jd- index/jd- index", 
"text" : "购物 车 " 

}, 

{ 


"selectedIconPath" : "icon/me0. png", 
"iconPath" : "icon/me. png", 

"pagePath" : "pages/jd- index/jd- index", 
"text": "我 的 " 


] 
}, 
"sitemapLocation": "sitemap. json" 


} 
pages/jd-index/jd-index.wxml 文件 代码 如 下 : 
<! -- 顶部 轮 播 图 -一 > 


< swiper autoplay = "{{autoplay}}" interval = "{{interval}}"> 
< block wx:for = "{{imgUrls}}"> 
< swiper — item> 
< image src = "{{item}}"></image> 
</swiper — item> 
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</block> 
</swiper> 
<! -10 个 京东 图 标 一 > 
< view class = "content"> 
<block wx:for = "{{elements}}"> 
< View class = "content — item"> 
< view> 
< image src = "{{ item. image}}" style = "width:86rpx;height:78rpx;"></image> 
</view> 
< view> 
{{item. name}} 
</view> 
</view> 
</block> 
</view> 
<! -- 商 品 展示 --> 
<view class = "mid"> 
< image src = "/images/index/11.png" style = "width:116rpx;height:120rpx"></image> 
< image src = "/images/index/12.png" style = "width:600rpx;height:120rpx"></image> 
</view> 
<view> 
< image src = "/images/index/13. png" style = "width:100 %;height:200rpx"></image> 
</view> 
< view class = "hr"></view> 
< View class = "footer"> 
< text > 京东 拼 购 </text > 
< image src = "/images/index/14.png" style= "width:300rpx;height:80rpx"></image > 
</view> 


pages/jd-index/jd-index.js 文件 代码 如 下 : 


Page({ 
data: { 
autoplay: true, 
interval: 5000, 
imgUrls: [ 
"/images/haibao/haibao - 1. png", 
"/images/haibao/haibao - 2. png" 
], 
elements: [{ 
image: "/images/index/1. png", 
name:" 领 优惠 券 "， 
},{ 
image: "/images/index/2. png", 
name: "9.9 元 拼 "， 
}, 
{ 
image: "/images/index/3. png", 
name: " 找 折扣 "， 
}, 
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image: "/images/index/4. png", 
name:" 闪 购 "， 

}, 

{ 
image: "/images/index/5. png", 
name:" 领 京 豆 "， 

}, 


image: "/images/index/6. png", 
name: " 打卡 有 奖 "， 

}，{ 
image: "/images/index/7.png"， 
name: "京东 服饰 "， 

}，{ 
image: "/images/index/8. png", 
name: ” 京东 生 鲜 "， 

}，{ 
image: "/images/index/9.png"， 
name: "京东 手机 "， 

}, 1 
image: "/images/index/10. png", 
name:" 全 部 频道 "， 

}, 


pages/jd-index/jd-index.wxss 文件 代码 如 下 : 
/x* 顶部 图 片 大 小 * / 


swiper image { 
width: 100 %; height: 300rpx; 
} 
/*10 个 京东 图 标 外 部 容器 布局 * / 
.content { 
display: flex; flex- direction: row; flex— wrap: wrap; 
} 
/*10 个 京东 图 标 内 部 容器 样式 * / 
.content 一 item { 
width: 20 %; text 一 align: center; 
font ~ size: 24rpx; margin: 8rpx 0; 
} 
/* 分隔 线 样式 */ 
.hr { 
width: 100 %; height: 30rpx; background - color: #f4f5f6; 
} 
/* 页 面 中 间 外 部 容器 布局 * / 
.mid { 
display: flex; flex- direction: row; padding: 40rpx; 
} 
/* 页 面 底 部 外 部 容器 布局 * / 


样式 与 布局 
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.footer { 
display: flex; flex- direction: row; 
justify— content: space— between; padding: 20rpx 40rpx; 
} 
/* 京东 拼 购 内 容 样式 */ 
text { 
font — weight: bold; 
} 


【代码 讲解 】 在 app.json 文件 中 首先 对 页 面 的 标题 及 底部 导航 栏 进行 设置 ,然后 对 页 
面 的 内 容 进行 布局 ,页 面 的 顶部 使 用 < scroll-view > 组 件 ,< scroll-view > 组 件 的 属性 值 和 内 
部 图 片 的 地 址 存放 在 JS 文件 中 ; 中 间 的 10 个 京东 图 标 使 用 flex 布局 进行 设计 ,主轴 设置 
为 水 平方 向 从 左 到 右 并 且 人 允许 换行 ,每 个 图 标的 宽度 设置 为 20% ,使 得 每 行 显示 5 个 京东 
图 标 ,最 后 对 图 标的 样式 进行 设置 ,下 方 内 容 均 采 用 flex 布局 ,完成 商品 图 片 的 放置 。 
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JavaScript 是 小 程序 逻辑 层 的 编程 语言 ,JavaScript 代码 大 约 占 小 程序 代码 量 的 一 半 ， 
学 好 JavaScript 是 学 好 小 程序 开发 的 关键 。 

本 章 主要 目标 

。 熟练 掌握 JavaScript 语法 格式 ; 

。 熟练 掌握 JavaScript 变量 ,数据 类 型 .运算 符 .函数 等 基本 概念 ; 

。 熟练 掌握 小 程序 事件 函数 中 this 和 that 的 使 用 ; 

。 熟练 掌握 JavaScript 在 小 程序 中 的 交互 场景 应 用 。 


5.1 JavaScript 简介 


JavaScript 是 一 种 轻 量 .解释 型 ,支持 面向 对 象 编程 风格 的 脚本 语言 , 它 是 一 种 直译 式 、 
动态 类 型 . 弱 类 型 以 及 基于 原型 的 语言 。JavaScript 语言 不 仅 可 用 于 Web 前 端 开发 ,也 广泛 
用 于 后 端 开发 和 智能 手机 开发 。JavaScript 的 标准 是 ECMAScript。2015 年 6 月 17 日， 
ECMA 国际 组 织 发 布 了 ECMAScript 的 第 六 版 ,该 版 本 正式 名 称 为 ECMAScript 2015 ,但 
通常 被 称 为 ECMAScript 6 或 者 ES6 。 

JavaScript 具有 以 下 特性 : 

。 JavaScript 是 一 种 基于 对 象 的 脚本 语言 , 它 不 仅 能 够 创建 对 象 ,而 且 可 以 使 用 对 象 ; 

。 JavaScript 是 一 种 轻 量 级 的 编程 语言 ; 

。 JavaScript 是 可 插入 HTML 页 面 的 编程 代码 ; 

。 JavaScript 插入 HTML 页 面 后 ,可 由 现在 所 有 的 浏览 器 执行 。 

正 是 由 于 JavaScript 易学 易 用 的 特性 ,使 得 它 在 最 近 几 年 应 用 广泛 ,获得 了 编程 界 的 好 
评 , 同 时 出 现 了 大 量 基于 JavaScript 的 开源 项 目 。 如 今 JavaScript 不 仅 可 以 实现 前 端的 动 
态 交 互 功能 ,而 且 可 以 运行 于 后 端 ,为 用 户 提供 高 性 能 的 后 端 服务 。 在 微 信 小 程序 中 ， 
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JavaScript 是 小 程序 逻辑 层 使 用 的 唯一 开发 语言 ,这 也 客观 反映 出 JavaScript 的 强大 ,因此 
学 好 JavaScript 对 实现 前 端的 交互 功能 非常 重要 。 

在 iOS 系统 中 ,小 程序 的 JavaScript 代码 是 运行 在 JavaScriptCore 中 , 然后 由 
WKWebView 来 泻 染 。 

在 安 卓 系统 中 ,小 程序 的 JavaScript 代码 是 由 X5 JS core 来 解析 ,由 X5 内 核 泻 染 。 

在 微 信 开发 者 工具 (IDE) 中 ,小 程序 的 JavaScript 代码 是 运行 在 nw.js 中 ,由 Chrome 
WebView 来 演 染 。 其 中 ,nw.js 是 基于 Chromium 和 Node.js 运行 的 ,封装 了 Webkit 内 核 
和 Node.js, 提 供 了 桌面 应 用 的 运行 环境 ,让 在 浏览 器 运行 的 程序 也 可 以 在 桌面 端 运行 。 

这 3 个 运行 环境 (iOS, 安 卓 和 微 信 开发 者 工具 ) 使 用 的 ECMA 标准 是 不 一 样 的 ,目前 
ECMAScript( 简 称 ES) 有 8 个 版 本 ,小 程序 使 用 的 是 ES5 和 ES6 标准 。 但 截至 目前 ,iOS 8 
和 iOS 9 并 没有 完全 兼容 到 ES6 的 标准 , 即 ES6 中 的 一 些 语法 和 关键 字 不 被 兼容 ,所 以 经 
常会 发 现 , 在 微 信 开 发 者 工具 里 和 手机 真 机 上 的 代码 表现 不 一 致 ,对 此 可 以 用 微 信 开发 者 工 
具 里 的 远程 调试 功能 ,在 真 机 上 进行 调试 。 


5.2 ”JavaScript 基础 语法 


本 节 将 介绍 JavaSeript 的 基础 语法 ,包括 变量 ,数据 类 型 .运算 符 、 逻 辑 控制 语句 等。 
5.2.1 变量 


变量 是 存储 信息 的 容器 ,所 有 JavaScript 变量 必须 以 唯一 的 名 称 标识 ,标识 称 为 变量 
名 。 定 义 变量 名 称 的 规则 为 : 名 称 可 包含 字母 .数字 .下 夯 线 ; 名 称 必 须 以 字母 开头 ,对 大 
小 写 敏 感 (x 和 X 是 不 同 的 变量 ); JavaScript 的 关键 词 不 能 作为 变量 名 称 。 

示例 代码 : 

vara= 1; // 声 明 变量 a 并 且 赋 值 为 数字 1 

var b = "abc"; // 声 明 变量 a 并 且 赋 值 为 字符 串 abc 

如 上 述 代码 所 示 , 注 释 是 指 编程 中 用 于 解释 说 明 的 部 分 ,用 于 提高 代码 的 可 读 性 。 
JavaScript 支持 单行 注释 和 多 行 注 释 。 单 行 注释 用 // 标 注 ; 多 行 注释 用 / x* … * /标注 。 


5.2.2 ”数据 类 型 


JavaScript 变量 能 够 保存 多 种 数据 类 型 : 字符 串 数字、 逻辑 值 数组、 对象。 本 节 将 逐 
一 介绍 

1. 字符 串 (String) 类 型 

字符 串 用 于 存储 一 系列 字符 ,使 用 单 引 号 或 双 引号 包 右 字符 串 的 内 容 。 

示例 代码 : 


var hello = "Hello xiaochengxu"; 
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var hello = 'Hello xiaochengxu'; 


无 论 是 单 引号 还 是 双 引 号 ,都 需要 成 对 出 现 , 不 能 出 现 不 一 致 现象 ,否则 在 编译 时 会 报错 。 

2. 数字 (Number) 类 型 

JavaScript 只 有 一 种 数字 类 型 ,数值 后 面 的 小 数 点 可 省 略 , 用 科学 记 数 法 能 够 表示 极 大 
值 和 极 小 值 。 


var xl = 1.00; // 带 小 数 点 
var x2 = 1; // 不 带 小 数 点 
var m = 123e5; //12300000 
varn = 123e-5; //0.00123 


3. 布尔 (Boolean) 类 型 

布尔 (逻辑 ) 类 型 只 有 两 个 值 ， true 和 false, 在 使 用 布尔 值 时 ,不 能 出 现 "false" 或 
"true" ,否则 会 被 解析 为 字符 串 。 

示例 代码 : 


var x = true; 


vary = false; 


变量 x 和 变量 y 都 是 布尔 类 型 ,如果 按 照 下 面 写 法 : 


var x = "true" 

vary = "false"; 

变量 x 和 变量 y 都 是 字符 串 类 型 ,字符 串 里 面 的 内 容 分 别 为 true 和 false。 
4. 数组 类 型 

JavaScript 中 的 数组 用 方 括号 书写 ,数组 中 的 元 素 由 逗号 分 隔 。 

示例 代码 : 


wi Ist ms es Se Es 
上 述 代码 定义 一 个 数组 ,数组 名 为 list, 数 组 中 包含 6 个 元 素 。 数 组 的 索引 index 从 0 
到 数组 的 个 数 减 1, 通 过 索引 值 可 以 取得 数组 中 的 元 素 。 例 如 listL2] 可 以 取得 数组 中 的 第 3 
个 元 素 。 数 组 中 包含 一 些 常 用 的 方法 ,在 微 信 小 程序 中 常用 的 Array 对 象 方法 如 表 5.1 
所 示 。 
表 5.1 Array 对 象 方法 


方 法 名 说 有明 

pop() 删除 并 返回 数组 的 最 后 一 个 元 素 

push() 向 数组 的 末尾 添加 一 个 或 更 多 元 素 , 并 返回 新 的 长 度 
reverse() 颠倒 数组 中 元 素 的 顺序 

shift() 删除 并 返回 数组 的 第 一 个 元 素 

slice() 从 某 个 已 有 的 数组 返回 选 定 的 元 素 

sort() 对 数组 的 元 素 进行 排序 

splice() 删除 元 素 , 并 向 数组 添加 新 元 素 

toString() 把 数组 转换 为 字符 串 , 并 返回 结果 

unshift() 向 数组 的 开头 添加 一 个 或 更 多 元 素 , 并 返回 新 的 长 度 
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以 表 5.1 中 的 push() 方 法 为 例 , 示 例 代码 如 下 : 


var fruits = ["Apple", "Banana", "Lemon", "Grape"]; 
fruits. push("Cherry"); 
for (var i = 1; i< fruits.length; i++) { 
console. log(fruits[i]); 
} 


上 述 代 码 执 行 完 以 后 ,会 在 Console 控制 台 输 出 “Apple, Banana, Lemon, Grape， 
Cherry”。 

5. 对 象 类 型 

JavaScript 对 象 用 大 括号 来 书写 ,内 容 放 置 在 大 括号 中 ,对 象 的 属性 通过 名 称 和 值 
(name: value) 来 定义 ,属性 之 间 用 逗号 分 隔 。 示 例 代码 如 下 : 


var person = { 
firstName: "tom", 
age: 23, 
hairColor: "black" 
}; 


上 述 代 码 中 对 象 (person) 有 3 个 属性 : firstrName、age 和 hairColor。 


5.2.3 运算 符 


JavaScript 运算 符 常 用 于 执行 算术 运算 .赋值 .比较 运算 .逻辑 运算 。 
1. 算术 运算 符 
算术 运算 符 用 于 变量 或 值 之 间 的 算术 运算 ,如 表 5.2 所 示 。 


表 5.2 JavaScript 算术 运算 符 


运 算 符 描 述 例 手 
加 x=y 十 1 
= 减 x 一 y 一 1 
x 乘 x=yx*1 
a 除 x=y/1 
% 求 余数 (保留 整数 ) x 一 y%1 
二 滞 累加 x 一 十 十 y 
震 持 递减 三 二 三 


对 于 两 个 数字 型 的 变量 ,变量 之 间 使 用 “十 ”运算 符 表示 相 加 ; 当 两 个 变量 都 为 字符 型 ， 
“十 "运算 符 表示 字符 串 的 连接 ; 当 一 个 变量 为 字符 型 , 另 一 个 变量 为 数值 型 ,数值 型 会 被 解 
析 为 字符 型 进行 字符 串 的 连接 。 

2. 赋值 运算 符 

对 变量 进行 赋值 使 用 赋值 运算 符 ,如 表 5.3 所 示 。 
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表 5.3 JavaSeript 赋值 运算 符 


运 算 符 例 到 等 同 于 
志 x=y 
十 一 x 十 一 X 一 X 十 y 
一 三 ee/ x 一 x 一 y 
关 一 xx 一 y x=x*y 
# x/=y x=x/y 
%= x%=y x=x%y 
3. 比较 运算 符 
比较 运算 符 表示 变量 之 间 的 逻辑 关系 ,如 表 5.4 所 示 。 
表 5.4 JavaScript 比较 运算 符 
运 算 符 描 述 比较 及 结果 
和 学 等 于 5 一 6 为 false 
三 二 三 全 等 ( 值 和 类 型 ) 5 一 一 一 5 为 true,5 二 二 二 '"5'" 为 false 
一 ! 不 等 于 51 二 6 为 true 
> 下 5 falee 
< 小 于 5 一 6 为 true 
~ 大 于 或 等 于 5 二 一 一 6 为 false 
ER 小 于 或 等 于 5 一 一 一 6 为 true 
4. 逻辑 运算 符 


人 逻辑 运算 符 用 于 确定 变量 或 值 之 间 的 逻辑 关系 ,假设 x 一 


用 如 表 5.5 所 示 。 


表 5.5 JavaScript 逻辑 运算 符 


5 and y 二 2, 人 逻辑 运算 符 的 使 


运 算 符 描 述 例 . 
&.&. 和 (x 10&&y > 1) 为 true 
| 或 (x 一 一 3 || y= 二 = 二 5) 为 false 
1 非 1(x = 一 y) 为 true 


5.2.4 逻辑 控制 语句 


逻辑 控制 语句 分 为 条 件 判 断 语句 和 循环 语句 。 


1. 条 件 判断 语句 


条 件 判 断 语句 基于 分 支 的 思想 , 面 对 不 同 的 情 
码 的 判断 和 重复 执行 。 


1) 让 语 句 


当 小 括号 内 的 条 件 为 true 时 ,大 括号 内 部 的 代码 才 会 执行 。 


证 (条 件 ) { 


况 或 条 件 执行 相应 的 选择 ,通用 于 某 些 代 


语法 如 下 : 
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当 条 件 为 true 时 才 执 行 该 代码 
} 


示例 代码 : 


if (data > 100) { 
console. log( data) 
} 


上 述 代 码 中 当 变 量 data 值 大 于 100 时 ,会 在 Console 控制 台 输 出 这 个 值 。 

2) if…else 语句 

当 条 件 为 true 时 执行 让 之 后 的 代码 , 当 条 件 为 false 时 执行 else 之 后 的 代码 。 语 法 
如 下 : 


证 (条 件 ) { 

当 条 件 为 true 时 执行 该 代码 
} else{ 

当 条 件 为 false 时 执行 该 代码 
} 


示例 代码 : 


if (data> 100) { 
console. log(" 输 入 的 数字 大 于 100") 
} else { 


console. log(" 输 入 的 数字 小 于 或 等 于 100") 
} 
上 述 代码 中 当 变 量 data 值 大 于 100 时 ,会 在 Console 控制 台 输 出 “输入 的 数字 大 于 
100”, 和 否则 ,会 在 Console 控制 台 输出 “输入 的 数字 小 于 或 等 于 100”。 
3) if…else if*…else 语句 
在 多 个 代码 块 中 选择 满足 条 件 的 一 个 去 执行 , 先 判 断 if 条 件 , 如 果 条 件 不 成 立 ,返回 
false 后 判断 else if 条 件 , 如 果 条 件 成 立 ,返回 true 并 执行 该 条 else if 后 的 代码 ,如 果 仍 不 成 
立 ,继续 判断 下 一 个 else if 的 条 件 。 如 果 直 到 else 时 都 没有 条 件 成 立 , 则 执行 else 中 的 代 
码 。 语 法 如 下 : 
if (条 件 1) { 
当 条 件 1 为 true 时 执行 该 代码 
} else if (条 件 2) { 
当 条 件 2 为 true 时 执行 该 代码 
} else { 


当 条 件 1 和 条 件 2 都 为 false 时 执行 该 代码 
} 


示例 代码 : 


if (data< 60) { 
console. log( "输入 的 数字 小 于 60") 

} else if (data >=60 g&& data <= 80) { 
console. log(" 输 入 的 数字 在 60 一 80 中 ") 
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} else{ 
console. log(" 输 入 的 数字 大 于 80") 
} 


当 变 量 data 值 小 于 60 时 ,执行 这 之 后 的 代码 ,会 在 Console 控制 台 输 出 “输入 的 数字 
小 于 60”; 当 变 量 data 值 为 60 一 80 时 ,执行 else 计 之 后 的 代码 ,输出 “输入 的 数字 在 60 一 80 
中 ”; 当前 面 的 条 件 都 不 满足 时 ,执行 else 后 面 的 语句 ,输出 “输入 的 数字 大 于 80”。 

4) switch 语句 

在 多 个 代码 块 中 选择 满足 条 件 的 一 个 去 执行 ,判断 表达 式 通常 为 变量 ,表达 式 的 值 会 与 
case 中 的 值 做 匹配 ,如 果 匹 配 正 确 ,会 执行 该 case 之 后 的 代码 块 , 使 用 break 可 以 阻止 代码 
继续 执行 , 当 条 件 都 不 满足 时 执行 default 之 后 的 代码 。 

示例 代码 : 


switch (n) { 

case 1: 
console. 1og(" 今 天 是 星期 一 ") 
break; 

Case 2: 
console. log(" 今 天 是 星期 二 ") 
break; 

Case 3: 
console. log(" 今 天 是 星期 三 ") 
break; 

case 4: 
console. log(" 今 天 是 星期 四 ") 
break; 

case 5: 
console. 1og(" 今 天 是 星期 五 ") 
break; 

case 6: 
console. log(" 今 天 是 星期 六 ") 
break; 

case 7: 
console. log(" 今 天 是 星期 日 ") 
break; 

default: 
console. log(" 输 入 有 误 请 重新 输入 ") 

} 


当 判 断 条 件 符合 其 中 某 一 条 件 时 ,在 Console 控制 台 输入 对 应 的 星期 数 ,然后 程序 执行 
break 语句 跳出 循环 ; 当 条 件 不 满足 所 有 case 时 ,会 执行 default 之 后 的 代码 ,输出 “输入 有 
误 请 重新 输入 ”。 

2. 循环 语句 

循环 语句 通过 判断 条 件 来 控制 循环 的 次 数 ,如 果 需 要 重复 执行 相关 的 动作 就 需要 使 用 
循环 语句 ,循环 语句 可 以 提高 代码 的 精简 性 。 

例如 ,需要 输出 一 个 数组 的 全 部 元 素 ,不 使 用 循环 语句 代码 如 下 : 


console. log(array[ 0]); 
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console. log(array[1]); 
console. log(array[2]); 
console. log(array[3]); 


使 用 循环 语句 代码 如 下 : 


for (var i = 0; i<array. length; i++) { 
console. log(array[i]); 


} 


上 述 代码 通过 循环 将 数组 array 中 的 所 有 元 素 在 Console 控制 台 输 出 。 
1) for 循环 

for 循环 是 经 常 使 用 的 循环 语句 ,语法 如 下 : 

for (语句 1; 语句 2; 语句 3) 

{ 


被 执行 的 代码 
} 


语句 1: 在 循环 开始 前 执行 初始 化 操作 ; 语句 2: 循环 的 条 件 , 当 返回 值 为 true 时 ,执行 


循环 体 , 当 返回 值 为 false 时 ,跳出 该 循环 ; 语句 3: 当 语 句 2 返回 值 为 true 时 执行 。 
示例 代码 : 


for (i = 1; i<10; i++) { 
console. log(i) 


} 

console. log(i) 

上 述 代 码 会 在 Console 控制 台 分 别 输出 1 到 9。 
2) for/in 循环 


for/in 循环 用 于 循环 对 象 属性 , 当 循 环 体 中 的 代码 每 执行 一 次 ,就 会 对 数组 的 元 素 或 者 


对 象 的 属性 进行 一 次 操作 。 
示例 代码 : 


var person = { 
firstName: "tom", 
age: 23, 
hairColor: "black" 

}; 

Var string = ""; 

var x; 

for (x in person) { 
string += person[x]; 


} 


输出 结果 为 : tom 23 black。 
3) while 循环 


当 条 件 满足 时 执行 代码 块 ,在 每 次 执行 完 后 会 进行 条 件 判 断 , 条 件 为 真 会 再 次 执行 , 直 


到 条 件 不 为 真 时 跳出 循环 。 语 法 如 下 : 
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while (条 件 ) { 
执行 其 中 的 代码 
} 


示例 代码 : 


vari= 1; 
while (i <10) { 
console. log(" 这 是 代码 执行 的 第 ”+ i + "次 "); 
+ 十 
} 
变量 i 从 初始 值 1, 到 不 满足 循环 条 件 i 二 10, 共 执行 了 9 次 循环 ,程序 在 Console 控制 
台 执行 了 9 次 语句 的 输出 。 
4) do…while 循环 
首先 执行 一 次 do 里 面 的 代码 块 , 如 果 条 件 为 真 会 重复 执行 , 当 条 件 为 假 时 跳出 循环 。 
语法 如 下 : 
do { 
执行 其 中 的 代码 


} 
while (条 件 ); 


示例 代码 : 


vari = 1; 
do { 
console. log(" 这 是 代码 执行 的 第 ”+ i + "次 "); 
} 
4 
while (i < 1); 


首先 执行 do 里 面 的 代码 ,然后 变量 i 变 为 2, 不 满足 while 里 面 的 条 件 直接 跳出 循环 。 


5.2.5 定义 和 调用 函数 


函数 的 定义 使 用 的 关键 字 是 function ,示例 代码 : 
function functionName(parameters) { 
执行 的 代码 
} 
在 小 程序 中 函数 的 定义 如 下 : 
functionName:function(e){ 
执行 的 代码 
} 
函数 的 调用 是 指使 用 事先 定义 好 的 函数 ,函数 本 身 是 一 种 对 象 ,示例 代码 : 


function myFunction(a, b) { 
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returna + b; 
} 
myFunction(1, 2); //myFunction(1,2) 返回 值 为 3 


5.2.6 小 程序 中 this 和 that 的 使 用 


this 是 JavaScript 语言 的 一 个 关键 字 , 可 以 调用 隐 数 。 当 函数 运行 时 ,this 可 以 在 函数 
内 部 使 用 , 当 函 数 使 用 场合 发 生变 化 时 ,this 的 值 也 会 发 生变 化 。 在 小 程序 开发 中 ,小 程序 
提供 的 API 接口 经 常会 有 success ,fail 等 回调 函数 来 处 理 后 续 逻 辑 。 当 需要 获取 当前 页 面 
对 象 来 对 视图 层 进行 这 染 时 ,this 只 会 指向 调用 函数 的 对 象 ,如 果 想 要 获取 页 面 的 初始 数 
据 , 在 回调 函数 里 面 就 不 能 使 用 this.data 来 获取 ,同时 也 不 能 使 用 this.setData() 函数 来 更 
新 数据 ,而 是 通过 语句 var this 二 that 将 this 指向 的 对 象 复制 到 that 中 才 可 以 执行 后 续 
操作 。 


5.3 ” JavaScript 在 小 程序 中 常见 的 交互 场景 


JavaScript 是 小 程序 编程 中 的 基础 语言 ,从 本 书 附带 案例 的 代码 来 看 ,JavaScript 代码 
大 约 占 整个 小 程序 项 目 一 半 的 代码 量 。 全 局 文件 app.js 和 所 有 的 页 面 的 JS 文 件 都 是 由 
JavaScript 来 编写 的 ,JavaScript 代码 主要 实现 业务 逻辑 处 理 和 用 户 交互 两 方面 的 作用 。 
5. 2 节 主 要 从 语法 的 角度 介绍 了 JavaScript 的 变量 .数据 类 型 .控制 语句 和 函数 定义 与 调 
用 ,本 节 将 以 JavaScript 在 小 程序 中 常见 的 交互 场景 出 发 ,以 案例 教学 的 方式 带领 读者 更 深 
层次 地 理解 JavaScript 在 小 程序 编程 中 的 使 用 。 


5.3.1 购物 车 场景 


尽管 张 小 龙 在 2018 微 信 公开 课 上 指出 ,“ 小 程序 不 是 专门 为 电 商 准备 的 ”, 但 由 于 强 社 
交 属 性 和 微 信 支 付 的 便捷 性 , 电 商 成 为 小 程序 的 重要 应 用 场景 。 

[ 贺 5-1 电 商 小 程序 中 经 常 要 用 到 购物 车 ,购物 车 是 JavaScript 在 小 程序 交互 场景 中 
的 经 典 应 用 。 本 例 实现 一 个 简单 的 购物 车 ,购物 车 初始 状态 和 用 户 加 购 商 品 之 后 的 购物 车 
状态 如 图 5.1 和 图 5.2 所 示 。 

pages/addCaricon/addCaricon.wxml 文件 代码 如 下 : 

< view class = "title"> 1. 显 示 图 标 小 案例 </view> 

< view class = "goods - box"> 

<! -- 商 品 展示 --> 
< image src = "/images/goods. png"></image> 


<view class = "carts — icon"> 
<! -- 购物 车 图 标 -一 > 
< image src = "/images/cart. png"></image> 


<! -一 加 入 购物 车 的 数量 -一 > 
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< text class = "carts - num" wx:if ="{{hasCart}}">{{totalNum} }</text > 
</view> 
<! -- 加 入 购物 车 导航 -一 > 
< view class = "operation"> 


< text class = "operation - num"> 数 量 { {num}}</text > 


< text class = "operation— add" bindtap = "addCount"> + </text > 
< text bindtap = "addCart"> 加 入 购物 车 </text > 
</view> 
</view> 


1. 显 示 图 标 小 案例 


图 5.1 购物 车 初始 状态 图 5.2 加 购 之 后 的 购物 车 


pages/addCaricon/addCaricon.js 文件 代码 如 下 : 


Page({ 
data: { 
num: 1, // 数 量 初始 化 为 1 
totalNum: 0, // 加 入 购物 车 的 商品 数量 初始 化 为 0 
hasCart: false, // 初 始 化 默认 不 加 入 购物 车 
} 
// 增 加 数量 


addCount: function() { 


var num = this. data.num7 


num++ // 数 量 增 加 1 
this. setData( { 
num: num // 更 新 数量 
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}) 
}, 


// 加 入 购物 车 
addCart: function() { 
const num = this. data. num; // 获 取 数 量 
var total = this. data. totalNum; // 获 取 总 数 
this. setData({ 
hasCart: true, // 用 于 控制 加 入 购物 车 时 的 显示 图 标 
totalNum: num + total // 累 计数 量 


}) 
wx. ShowToast({ 
title: "加 入 购物 车 成 功 "， // 弹 出 消息 提示 框 
duration: 3000, 
}) 
}, 
}) 


pages/addCaricon/addCaricon.wxss 文件 代码 如 下 : 


/* 页 面 盒子 * / 

.goods — box { 
position: relative; 
padding: 0 30rpx; 
text ~ align: center; 

} 

/* 购物 车 位 置 * / 

.Carts— icon { 
position: absolute; 
right: 600rpx; 
top: 490rpx; 
width: 70rpx; 
height: 70rpx; 

} 

/* 购物 车 图 标 */ 

.Carts— icon image { 
width: 100 %; 
height: 100 %; 

} 

/* 显示 加 入 购物 车 图 标 */ 

.carts— num{ 
position: absolute; right: 36rpx; width: 40rpx; 
height: 40rpx; color:white; 
font — size: 26rpx; 
line— height: 40rpx; 
border - radius: 50 %; 
background: #e4393c; 

} 

/* 加 入 购物 车 导航 */ 

.operation { 
height: 80rpx; line— height: 80rpx; 
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color:white; border — radius: 50rpx; 
background: #ff9600; 
font - size: 30rpx; 
} 
/* 操 作文 本 */ 
.operation text { 
display: inline- block; 
height: 80rpx; 
} 
/* 加 入 购物 车 数量 * / 
.Operation— nunm { 
width: 160rpx; 
} 
/* 加 入 购物 车 符号 * / 
.operation 一 add { 
width: 80rpx; 
margin ~— right: 50rpx; 
} 
【代码 讲解 】 addCaricon.wxml 文件 中 “十 ”和 “加 入 购物 车 ”两 个 按钮 绑 定 了 点 击 事 
件 。 在 addcart.js 文件 中 为 “十 ”按钮 定义 了 事件 函数 addCount(), 用 于 实现 当 用 户 点 击 
“十 ”按钮 时 商品 数量 加 1。 为 "加 入 购物 车 ?按钮 定义 的 函数 addToCart() ,用 于 实现 当 用户 
点 击 * 加 入 购物 车 ?时 ,一 次 性 向 购物 车 添加 num 件 商品 。 当 用 户 有 加 购 行为 , 即 点 击 了 “加 
和 人 购物 车 ”按钮 时 ,hasCart 被 赋值 为 true, 则 在 购物 车 图 标的 左上 角 会 出 现 当 前 购物 车 商品 
数量 。 


5.3.2 下 拉 菜 单 场景 


JavaScript 在 Web 开发 中 经 常 被 用 来 实现 动态 效果 ,在 微 信 小 程序 开发 者 中 也 存在 类 
似 的 场景 。 下 拉 菜 单 是 JavaScript 在 小 程序 中 常见 的 交互 场景 之 一 , 当 用 户 单 击 一 级 菜单 
时 ,二 级 菜单 被 弹出 , 当 再 次 单 击 一 级 菜单 时 ,二 级 菜单 又 消失 。 

贺 s-2 本 例 设计 常见 的 小 程序 下 拉 菜 单 , 图 5.3 是 二 级 菜单 没有 弹出 的 状态 ,图 5.4 
是 二 级 菜单 弹出 的 状态 。 

pages/subMenu/subMenu.wxml 文件 代码 如 下 : 

<view class= "title"> 2. 下 拉 菜 单 场景 小 案例 </view > 
< view class = "page"> 


<! 一 -导航 内 容 -一 > 


<view class = "nav"> 


<view class = "nav— item {{shownavindex == 1?'active':''}}" 
bindtap = "listmenu" data— nav= "1"> 
<view class = "content"> 排 序 </view> 
< view class = "icon"></view> 
</view> 
< View class = "nav — item"> 
< view class = "content"> 时 间 </view> 


<view class = "icon"></view> 
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</view> 
<view class = "nav— item"> 
<view class = "content"> 价 格 </view> 
<view class = "icon"></view> 
</view> 
</view> 
<! -- 下 拉 内 容 --> 
<view class = "list {{openif?'down': 'up'}} "> 
< view wx:for = "{{content}}"> 
{{item}} 
</view> 
</view> 
</view> 


10:04 0 ， hat 10:05 100% 磊 末 ， 


案例 demo 案例 demo OO] 


2 下 拉 莱 单 场 时 小 案 例 2 下 拉 荣 单 场 时 小 案例 
排序 ~ | 时 间 ~ | 价格 ~ | 时 间 ~ | 价格 ~ 
默认 排序 
高 我 最 近 
价格 最 低 
价格 最 高 
图 5.3 下 拉 菜 单 弹出 之 前 图 5.4 下 拉 菜单 弹出 之 后 


pages/subMenu/subMenu.js 文件 代码 如 下 : 


Page({ 
data: { 
1i: [' 默 认 排序 '，' 离 我 最 近 '，' 价 格 最 低 '，' 价 格 最 高 ']， 
shownavindex: 0 // 数 据 初始 化 
}, 
// 下 拉 事 件 


listmenu: function(e) { 
if (this. data. openif) { 
this. setData( { 
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openif: false, // 当 前 菜单 没有 下 拉 
shownavindex: 0 // 控 制图 标 样式 
}) 
} else { 
this. setData({ 
content: this. data. 1i, // 获 取 数 组 数据 
openif: true, // 当 前 菜单 下 拉 


shownavindex: e. currentTarget. dataset. nav // 控 制图 标 样式 


pages/subMenu/subMenu.wxss 文件 代码 如 下 : 


/* 页 面 溢出 隐藏 * / 
,Page { 
overflow: hidden; 
} 
/* 导航 外 部 样式 * / 
.nav { 
position: relative; 
z— index: 1; 
display: flex; 
flex— direction: row; 
background: white; 
} 
/* 导航 内 部 样式 * / 
.nav— item { 
display: flex; 
flex: 1; 
text ~ align: center; 
height: 90rpx; 
align— items: center; 
justify~ content: center; 
font — size: 30rpx; 
border: 1px solid gray; 
} 
/* 导航 下 拉 图 标 * / 
. icon { 
border: 10rpx solid transparent; 
border — top: 10rpx solid gray; 
margin 一 left: 12rpx; 
} 
/* 下 拉 内 部 样式 */ 
.list { 
display: none; 
width: 100 %; 
overflow — y: scroll; 


padding: 0 0 0 20rpx; 
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line — height: 100rpx; 
background: white; 
} 
/x* 下 拉 内 容 样式 x*/ 
.list view { 
border - bottom: 1px solid gray; 
font - size: 32rpx; 
} 
/* 点 击 导航 内 容 文字 后 的 样式 * / 
.nav — item.active .content { 
color: skyblue; 
} 
/x* 点 击 导航 下 拉 图 标 后 的 样式 * / 
.nav — item.active . icon { 
border - bottom: 10rpx solid skyblue; 
border - top: 0; 
} 
/* 下 拉动 画 样式 */ 
.down { 
display: block; 
animation: slidown 0.5s ease— in both; 
} 
@keyframes slidown { 
from { 
transform: translateY( — 100 % ); 
} 
tof{ 
transform: translateY(0% ); 
} 
} 
/* 收 起 动画 样式 * / 
.up{ 
display: block; 
animation: slidup 0.5s ease— in both; 
; 
@keyframes slidup { 
from { 
transform: translateY(0% ); 
} 
to { 
transform: translateY( — 100 % ); 
} 
} 


【代码 讲解 】 本 例 是 JavaScript 和 样式 布局 结合 的 案例 ,在 subMenu.js 文件 中 设置 初 
始 值 shownavindex: 0, 使 得 导航 的 字体 初始 值 为 黑色 。 当 用 户 点 击 菜单 的 时 候 激 活 事件 函 
数 listmenu() ,此 时 content 被 赋值 使 得 下 拉 菜 单 被 弹出 ,shownavindex 从 0 到 1 的 变化 使 
得 一 级 菜单 和 向 下 箭头 的 样式 也 发 生变 化 。 
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在 文章 管理 或 者 商品 管理 小 程序 中 ,往往 有 分 类 或 者 栏目 的 切换 , 当 点 击 某 一 栏 ( 某 一 
区 域 ) ,显示 区 域 的 文章 和 商品 被 重 置 为 被 点 击 的 栏目 下 的 文章 和 商品 。 
[ 贺 5-3 本 例 设计 商品 栏目 的 切换 效果 , 右 侧 显示 区 域 根据 左 侧 栏目 的 选择 来 显示 对 


应 的 内 容 , 运 行 效果 如 图 5.5 和 图 5.6 所 示 。 


e0000 WeChats 10:08 


案例 demc 


3 .栏目 切换 场景 小 案例 3. 栏 目 切 换 场景 小 案例 
手机 数码 ”切换 到 手机 数码 了 机 数码 “切换 到 家 用 电器 
家 用 电器 家 用 电器 
运动 户外 运动 户外 
优先 水果 优选 水 果 
食品 生 鲜 食品 生 鲜 
运动 户外 运动 户外 
电脑 办 公 电脑 办 公 
体育 用 品 体育 用 品 
美 要 护肤 美术 护肤 
图 5.5 “手机 数码 "栏目 图 5.6 “家 用 电器 "栏目 


pages/switchTab/switchTab.wxml 文件 代码 如 下 : 


<view class = "title"> 3. 栏 目 切换 场景 小 案例 </view> 


<view class = "content"> 


<view class = "left"> 


<! 一 左 侧 部 分 一 > 


< scroll - view scroll 一 Y> 
<block wx:for ="{{list1}}" wx:for- index = "id"> 
<view id="{{id}}" bindtap = "switchTab">{{item} }</view> 


</block> 
</scroll - view> 
</view> 
<view class = "right"> 


<! 一 右 侧 部 分 -一 > 


< swiper current = "{{currentTab}}" 
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< block wx:for= "{f{flist2}}"> 

< swiper — 让 em > 
{{item}} 

</swiper — item> 

</block> 

</swiper > 
</view> 
</view> 


pages/switchTab/switchTab.js 文件 代码 如 下 : 


Bage({ 
data: { 
currentTab: 0, // 初 始 化 数据 
list1: [" 手 机 数码 "，" 家 用 电器 "，" 运 动 户外 "，" 优 选 水 果 "，" 食 品 生 鲜 "，" 运 动 户外 "，" 电 脑 
办 公 "，" 体 育 用 品 "，" 美 妆 护 肤 "], 
list2: [" 切 换 到 手机 数码 "," 切 换 到 家 用 电器 ", "切换 到 运动 户外 ", "切换 到 优选 水 果 "," 切 
换 到 食品 生 鲜 "," 切 换 到 运动 户外 "," 切 换 到 电脑 办 公 "，" 切 换 到 体育 用 品 "," 切 换 到 美 妆 护 肤 "]， 
}, 
switchTab: function(e) { 
var that = this; 


var id = e. target. id; // 获 取 id 
if (this, data. currentTab == id) { 
return // 与 currentTab 值 一 致 返回 
} else { 
that. setData( { 
currentTab: id // 设 置 currentTab 值 为 id 


pages/switchTab/switchTab.wxss 文件 代码 如 下 : 
/* 布局 样式 */ 


.Content { 
display: flex; 
flex- direction: row; 
} 
/* 左边 样式 */ 
.left { 
width: 25 %; 
font — size: 30rpx; 
} 
scroll — view { 
height: 90 %; 
} 
/* 左边 元 素 样式 */ 
. left view { 
text — align: center; 
height: 100rpx; 
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1line- height: 100rpx; 
} 
/* 右边 样式 */ 
.right { 
width: 75 %; 
} 


【代码 讲解 】 本 例 switchTab.wxml 使 用 flex 布局 实现 栏目 和 内 容 的 左右 分 布 , 左 侧 
是 < scroll-view > 组 件 , 右 侧 是 < swiper > 组 件 , 当 用 户 点 击 左 侧 栏 目的 时 候 switchTab.js 获 
取 栏 目的 id, 并 把 id 赋值 给 current, 此 时 右 侧 的 < swiper > 组 件 的 第 id 项 被 显示 ,从 而 实现 
了 左右 的 同步 。 本 例 巧妙 地 使 用 了 < swiper > 组 件 的 current 属性 实现 内 容 的 切换 。 


5.3.4 系统 设置 场景 
大 部 分 的 App 和 小 程序 都 有 系统 设置 功能 ,系统 设置 功能 主要 是 用 户 答 入 或 者 选中 数 


a 在 微 信 小 程序 中 常见 的 应 用 场景 。 

圆 5-4 本 例 以 辩论 赛 小 程序 为 背景 ,系统 设 管 功能 可 以 对 立论 、 驱 
立论 . 质 辩 . 自 由 辩论 和 总 结 陈 词 等 环节 的 辩论 时 间 和 倒计时 时 间 进 行 设 
置 ,系统 设置 页 效果 如 图 5.7 所 示 ,项 目 首页 简单 设计 如 图 5.8 所 示 。 


立论 阶段 设置 的 参数 如 下 : 
时 间 限制 是 260, 倒 计时 时 间 是 15 秒 


驶 立论 阶段 设置 的 参数 如 下 
时 间 限 制 是 340 倒计时 时 间 司 是 15 秒 


质 辩 环 节 设置 的 参数 如 下 : 
时 间 限 制 是 180, 倒 计时 时 间 是 15 秒 


自由 辩论 设置 的 参数 如 下 
时 间 限 制 是 252, 倒计时 时 间 是 15 秒 


总 结 陈 词 设置 的 参数 如 下 : 
时 间 限制 是 284: 倒 8 间 是 15 秒 


和 


图 5.7 设置 页 面 图 5.8 项 目 首页 
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app.js 文件 代码 如 下 : 


App({ 


data: { configs: [{ name: "立论 阶段 "，time: 180,，voice: 15 }，{ name:" 驶 立论 阶段 "，time: 
180，voice: 15 }，{ name:" 质 辩 环 节 ",， time: 180，voice: 15 }，{ name: "自由 辩论 "，time: 


voice: 15 }，{ name: "总结 陈 词 "，time: 180, voice: 15 }]}, 
onLaunch: function() { 
wx. setStorageSync( 'configs', this. data. configs); 
} 
}) 


pages/setting/setting.wxml 文件 代码 如 下 : 
<! 一 -立论 阶段 --> 


<view> 
< view class = "title"> 立 论 阶 段 </view> 
"></view> 


<view class= 
<view> 


< text > 时 间 限 制 ( 秒 )</text > 


< slider id = "0" bindchange = "sliderChange" show - value min = "10" max = "360" value= 


"{{configs[0]. time}}" /> 
</view> 
<view> 
< text > 声音 提醒 </text > 
<radio- group id= "0" class = "item" bindchange = "radioChange"> 


<label> 

<radio value = "15" checked/> 提 前 15 秒 </label > 
<label> 

< radio value = "10" /> 提前 10 秒 </label > 
<label> 


<radio value = "5" /> 提前 5 秒 </label > 
</radio - group> 
</view> 
<! -- 驳 立论 阶段 -一 > 
<view class = "title"> 驶 立论 阶段 </view> 
<view class = "hr"></view> 
<view> 


< text > 时 间 限 制 ( 秒 )</text > 


<slider id= "1" bindchange = "sliderChange" show— value min= "10" max= "360" 


value = "{{configs[1].time}}" /> 
</view> 
<view> 
< text > 声音 提醒 </text > 
< radio - group id = "1" class = "item" bindchange = "radioChange"> 


<label> 
< radio value = "15" checked/> 提 前 15 秒 </label > 
< label> 
< radio value = "10" /> 提前 10 秒 </label > 
< label > 


< radio value = "5" /> 提前 5 秒 </label > 
</radio - group > 
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</view> 
<! -- 质 辩 环 节 一 -> 
<view class = "title"> 质 辩 环 节 </view> 
<view class = "hr"></view> 
<view> 
< text > 时 间 限 制 ( 秒 )</text > 
< slider id= "2" bindchange = "sliderChange" show— value min= "10" max = "360" 
value = "{{configs[2].time}}" /> 
</view> 
<view> 
< text > 声音 提醒 </text > 
<radio - group id= "2" class = "item" bindchange = "radioChange"> 


<label> 

< radio value = "15”checked/> 提 前 15 秒 </label > 
<label> 

<radio value = "10" /> 提前 10 秒 </label> 
<label> 


< radio value = "5" /> 提前 5 秒 </label > 

</radio - group > 

</view> 

<! -- 自 由 辩论 --> 

< view class = "title"> 自 由 辩论 </view> 

< view class = "hr"></view> 

< view> 
< text > 时 间 限 制 ( 秒 )</text > 
< slider id= "3" bindchange = "sliderChange" show— value min= "10" max= "360" 
value = "{{configs[3].time}}" /> 

</view> 

<view> 
< text > 声音 提醒 </text > 
<radio- group id= "3" class = "item" bindchange = "radioChange"> 


<label> 

< radio value = "15" checked/> 提 前 15 秒 </label > 
<label> 

< radio value = "10" /> 提前 10 秒 </label > 
<label> 


<radio value = "5" /> 提前 5 秒 </label > 
</radio - group> 
</view> 


! 一 总结 陈 词 -一 > 


<view class = "title"> 总 结 陈 词 </view> 
< view class = "hr"></view> 
< view> 
<text > 时 间 限 制 ( 秒 )</text> 
<slider id= "4" bindchange = "sliderChange" show— value min= "10" max= "360" 
value = "{{configs[4]. time}}" /> 
</view> 
<view> 
< text > 声音 提醒 </text > 
<radio - group id= "4" class = "item" bindchange = "radioChange"> 
<label> 
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< radio value = "15"” checked/> 提 前 15 秒 </label > 


< label > 
< radio value = "10" /> 提前 10 秒 </label> 
< label> 


< radio value = "5" /> 提前 5 秒 </label > 
</radio - group > 
</view> 
</view> 


pages/setting/setting.js 文件 代码 如 下 : 


Page({ 

data:{ 
configs:[] 

}, 

onLoad: function(options){ 
var configs = wx.getStorageSync( 'configs'); 
this. setData( {configs:configs}); 

}, 

sliderChange:function(e){ 
var id = e. target. id; 
this. data. configs[ id].time = e.detail.value 
wx. setStorageSync( 'configs', this. data. configs); 
console. log(this. data. configs) 

}, 

radioChange: function(e){ 
var id = e. target. id; 
this. data. configs[ id]. voice = e.detail.value 
wx. setStorageSync( 'configs', this. data. configs); 
console. log(this. data. configs) 

} 

}) 


pages/setting/setting.wxss 文件 代码 如 下 : 


/* 页 面 样式 */ 
page { 
background - color: skyblue; color: black; 
} 
/* 标题 样式 */ 
title { 
font - size: 40rpx; height: 72rpx; 
line— height: 72rpx; padding — left: 20rpx; 
} 
/* 分 隔 线 样式 */ 
.hr { 
margin: 12px; width: 100 %; 
height: 1px; background - color: grey; 
} 
/* 文 字样 式 */ 
text { 
padding ~ left: 20rpx; font ~ size: 30rpx; 
} 


198 


第 5 章 ”JavaScript 基 础 0 


/* 选 项 样式 * / 
.item { 
margin: 12rpx; 
} 
/* 标签 样式 */ 
.item label { 
margin: 10px; 


} 
pages/index/index.wxml 文件 代码 如 下 : 


<view wx:for="{{configs}}"> 

<view class = "setitem"></view> 

< view>{{item. name}} 设 置 的 参数 如 下 : </view>< view> 时 间 限 制 是 {{f item.tine}}, 倒 计时 时 间 是 
{{item. voice}} 秒 </view> 

</view> 


pages/index/index.js 文件 代码 如 下 : 


Page({ 
data: { 
configs: [] 
} 
onShow: function (options) { 
var configs = wx, getStorageSync( 'configs') 7 
this. setData({ configs: configs }); 
}, 
}) 


pages/index/index.wxss 文件 代码 如 下 : 


.setitem{ 
height: 30rpx; 
} 
view { 
padding — left: 10rpx; 
} 
【代码 讲解 】 本 例 中 辩论 赛 数 据 configs 存放 在 app.js 文件 中 ,通过 wx.setStorageSync() 
和 wx.getStorageSync() 接 口 实现 多 个 页 面 之 间 数 据 的 共享 和 维护 ,setting 页 面 的 < slider > 和 
<radio > 组 件 输入 的 数据 被 事件 函数 sliderChange() 和 radioChange() 用 来 修改 全 局 数据 
configs。 项 目 需 注意 修改 全 局 数据 configs 时 的 下 标 问 题 。 


5.4 ” 实 训 项 目 一 一 计算 器 小 案例 


视频 讲解 
本 实 训 项 目 设计 一 个 计算 器 ,实现 了 加 , 减 、 乘 、 除 运算 。 程 序 运行 效果 如 图 5.6 所 示 。 
本 项 目 没有 涉及 小 程序 复杂 的 接口 ,使 用 的 是 第 4 章 样式 与 布局 和 第 5 章 JavaScript 基础 
的 知识 点 。 项 目的 设计 思路 是 先 编写 WXML 文件 ,然后 编写 JS 接收 WXML 的 数据 的 代 
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码 , 再 编写 加 \ 减 、 乘 , 除 运算 的 逻辑 代码 ,最 后 编写 WXSS 文件 。 程 序 执 行 效 果 如 图 5.9 


所 示 。 


eee WeChais 1720 100% mn 


图 5.9 计算 器 示例 图 
pages/calculator/addList.wxml 文件 代码 如 下 : 


< view class = "demo — box"> 


<! 一 输入 框 --> 

<view class = "input - screen">{{screenData} }</view> 

<! -- 按钮 --> 

< view class = "btn~ group"> 
< view class = " item green" bindtap = "onclickButton" id = "{{idl}}"> back </view> 
< View class = " item green" bindtap = "onclickButton" id= "{{fid2}}"> C</view> 
< view class = " item green" bindtap = "onclickButton" id="{{id3}}">+/-</view> 
< view class = "item green" bindtap = "onclickButton" id="{{id4}}">+ </view> 


</view> 

<view class = "btn - group"> 
id5}}">7 </view> 
id6}}">8</view> 


< view class = "item blue" bindtap = "onclickButton" id 


< view class = "item blue" bindtap = "onclickButton" id= 
<view class = "item blue" bindtap = "onclickButton" id= "{{id7}}">9 </view> 
< view class = "item green" bindtap = "onclickButton" id="{{id8}}">x</view> 

</view> 

< view class = "btn - group"> 
< view class = "item blue" bindtap = "onclickButton" id= "{{id9}}"> 4</view> 
< view class = " item blue" bindtap = "onclickButton" id= "{f{fidl0}}"> 5</view> 
< view class = " item blue" bindtap = "onclickButton" id= "{f{fidl1}jj"> 6</view> 


200 


第 5 章 “JavaScript 基础 0 


< view class = " item green" bindtap = "onclickButton" id = "ffidl12}}"> -</view> 


</view> 
< View class = "btn— group"> 


< view class = "item blue" bindtap = "onclickButton" id="{{id13}}">1</view> 
< view class = "item blue" bindtap = "onclickButton" id="{{id14}}">2</view> 
< view class = "item blue" bindtap = "onclickButton" id="{{id15}}">3</view> 
< view class = "item green" bindtap = "onclickButton" id="{{id16}}">+</view> 


</view> 
< view class = "btn - group"> 


< view class = " iteml blue" bindtap = "onclickButton" id= "{{fid17}}"> 0 </view> 
< view class = " item blue" bindtap = "onclickButton" id = "{{id18}}">.</view> 
< view class = "item green" bindtap = "onclickButton" id = "{f{fid19}}"> = </view> 


</view> 
</view> 


pages/calculator/addList.js 文件 代码 如 下 : 


Page({ 
data: { 

idl: "back"， 
id2: "clear"， 
id3 : "negative", 
id4 : 
id5 : 
jd 
id7: " 
id8: 
id9: 
id10: 
3 
id12: 
id13: 
id14: 
id15: 
id16: 
id17: 
id18 : 
Ee 
screenData: "0", 
lastInput: false, 


array: [], 
}, 
onclickButton: function(e) { 
var id = e. target. id; 
if (id == this.data.idl) { 
var data = this. data. screenData; 
if (data == 0){ 
return; 


} 


data = data. substring(0, data. length — 1); 


if (data == "" || data == "—"){ 


// 屏 幕 数字 初始 化 
// 控 制 输入 
// 定 义 一 个 空 数组 


// 退 格 
// 删 除 最 后 一 位 
// 如 果 为 空 或 者 符号 置 零 
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data = 0; 
} 
this. setData( { 
screenData: data 
]) 7 
this. data. array. pop( ); 
this. data. array. push( data); 
else if (id == this. data. id2) { // 清 屏 
this. setData({ 
screenData: "0" 
D); 
this. data. array. length = 0; 
else if (id == this. data. id3) { // 正 负 号 
var data = this. data. screenData; 
if (data == 0) { 
return; 
} 
var firstWord = data. substring(0, 1); 
if (firstWord == "—"){ 
data = data. substring(1, data. length); // 去 掉 负 号 
this. data. array. shift( ); 
} else{ 
data = "一 ”+ data; 
this. data. array. unshift(" — "); // 增 加 负 号 
} 
this. setData({ 
screenData: data 
}); 
else if (id == this. data. id19) { //= 
var data = this. data. screenData; 
if (data == 0) { 
return; 
} 
var lastWord = data. substring(data. length — 1, data. length); 
if (isNaN(lastWord)) { 
return; // 最 后 一 位 不 是 数字 返回 


// 定 义 一 个 字符 串 


var lastInput; 

var array = this. data.array; 
var optaration = []; 

for (var i in array) { 


if (isNaN(array[i]) == false || array[i] == this. data. id18 || array[i] 

== this. data. id3) { 

num += array[i]; // 对 小 数 点 或 者 正 负 号 进行 合并 处 理 
} else { // 加 减 乘除 单独 处 理 


lastInput = array[i]; 
optaration. push(num); 
optaration. push(array[ i]); 


num = : 
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} 

optaration. push( Number (num)); 

var result = Number(optaration[0]) * 1.0; 

for (var i = 1; i< optaration. length; i++) { 
if (isNaN(optaration[i])) { 


if (optaration[1] == this. data. id4) { // 除 运算 
result /= Number(optaration[i + 1]); 
} else if (optaration[1] == this. data. id8) { // 乘 运算 


result * = Number(optaration[i + 1]); 

} else if (optaration[1] == this. data. id12) { // 减 运算 
result -= Number(optaration[i + 1]); 

} else if (optaration[1] == this. data. id16) { // 加 运算 
result += Number(optaration[i + 1]); 


} 

this. data. array. length = 0; 
this. data. array. push( result); 
this. setData( { 


screenData: result + "" // 将 计算 结果 赋值 用 于 在 屏幕 上 显示 
}); 
} else{ 
if (id == this. data. id4 || id == this. data. id8 || id == this. data. idl2 || id == 


this. data. id16) { 
if (this. data. lastInput == true | | this.data. screenData == 0) { 


return; // 开 始 不 允许 输入 加 减 乘除 


} 


var vd = this. data. screenData; 


var data; 
if (vd == 0){ 
data = id; 
} else{ 
data = vd + id; // 用 于 连续 输入 数字 


} 
this. setData( { 
screenData: data 
}); 
this. data. array. push( id); 
if (id == this. data. id4 || id == this. data. id8 || id == this. data. idl2 || id == 
this. data. id16) { 
this. setData( { 
lastInput: true 
]) 
} else{ 
this. setData({ 
lastInput: false 
]) 
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]) 


pages/calculator/addList.wxss 文件 代码 如 下 : 


/* 外 部 布局 * / 
.demo— box { 
background - color: black; padding: 10rpx; 
} 
/* 输 入 框 样式 */ 
. input — screen { 
background - color: white; border - radius: 20rpx; text — align: right; 
width: 710rpx; height: 120rpx; line - height: 120rpx; 
padding ~ right: 20rpx; margin - bottom: 40rpx; 
} 
/* 按钮 布局 方式 * / 
.btn 一 group { 
display: flex; flex- direction: row; 
} 
/* 按钮 样式 * / 
, item { 
width: 150rpx; height: 150rpx; 
margin: 15rpx; border - radius: 100rpx; 
text ~ align: center; line— height: 150rpx; 
} 
/* 按 钮 0 样式 */ 
.iteml { 
width: 320rpx; height: 150rpx; 
margin: 10rpx; border - radius: 100rpx; 
text ~ align: center; line— height: 150rpx; 
} 
/* 颜色 样式 * / 
.green { 
color: 井 f7f7f7; background: 井 Tccd7c; 
} 
/* 颜色 样式 * / 
.blue { 
color: 井 f7f7f7; background: #0095cd; 
} 


【代码 讲解 】 本 项 目 在 addList.wxml 文件 和 addList.wxss 文件 中 完成 页 面 的 布局 ,为 
每 个 按钮 绑 定 点 击 事件 ; 在 JS 文 件 中 首先 设置 允许 连续 输入 操作 数 并 且 不 允许 连续 输入 
操作 符 , 然 后 分 别 为 每 个 按钮 设置 交互 功能 ,包括 退 格 、 清 零 和 正 负 号 ,接着 定义 等 号 的 交 
互 , 数 字 在 连续 输入 时 将 中 间 结 果 保存 在 数组 中 ,最 后 实现 加 减 乘除 运算 。 由 于 考虑 到 篇 幅 
问题 ,设计 功能 完整 的 计算 器 代码 较 多 , 故 没 有 涉及 运算 的 优先 级 处 理 , 有 兴趣 的 读者 可 以 
自行 修改 本 项 目 。 
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随 着 数据 量 的 增加 ,程序 开发 对 数据 库 的 依赖 也 就 随 之 而 来 。 小 程序 的 数据 除了 在 
WXML 和 JS 文 件 中 可 以 声明 之 外 ,开发 者 也 可 以 把 有 规律 的 数据 存放 在 后 端 数据 库 中 , 青 
通过 通信 连接 接口 对 数据 库 中 的 数据 进行 读 写 操 作 。 本 章 将 以 MySQL 数据 库 为 蓝本 , 介 
绍 微 信 小 程序 如 何 利用 wx.request() 接 口 读 写 数 据 库 数据 。 本 章 结 尾 还 引入 了 一 个 开源 项 
目 html2wxml, 它 可 以 将 HTML 页 面 顺利 地 转化 成 小 程序 的 WXML 文件 ,从 而 为 快速 开 
发 小 程序 页 面 提供 了 另 一 种 解决 方案 。 

本 章 主要 目标 

。 了解 小 程序 前 端 与 后 端 开 发 的 分 工 ; 

。 熟练 掌握 MySQL 数据 库 及 Navicat 的 操作 ; 

。 熟练 掌握 Servlet 读 取 数 据 库 数 据 JSON 格式 处 理 和 wx.request() 网 络 请 求 操作 ; 

。 熟练 掌握 数据 缓存 Storage 和 富 文 本 插件 html2wxml 的 使 用 。 


6.1 MySOQL 数据 库 


MySQL 是 一 个 小 型 关系 型 数据 库 管理 系统 ,被 广泛 地 应 用 在 Internet 上 的 中 小 型 网 
站 中 。 由 于 其 体积 小 .速度 快 、 成 本 低 ,尤其 是 开放 源码 这 一 特点 ,许多 中 小 型 网 站 为 了 降低 
网 站 总 体 开发 和 运营 成 本 而 选择 它 作为 网 站 数据 库 。 下 面 将 介绍 MySQL 数据 库 的 安装 、 
管理 和 可 视 化 管理 工具 Navicat, 有 相关 方面 学 习 经 历 的 读者 可 以 跳 过 此 节 内 容 。 


6.1.1 MySQL 数据 库 介绍 


MySQL 由 瑞典 MySQL AB 公司 开发 ,目前 属于 Oracle 旗下 产品 。MySQL 是 最 流行 
的 关系 型 数据 库 管 理 系 统 之 一 ,在 Web 应 用 方面 , MySQL 是 最 好 的 RDBMS (Relational 
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Database Management System ,关系 数据 库 管 理 系 统 ) 应 用 软件 之 一 。 关 系 型 数据 库 将 数据 
保存 在 不 同 的 表 中 ,而 不 是 将 所 有 数据 放 在 一 个 大 仓库 内 ,从 而 提升 了 速度 并 提高 了 灵活 性 。 
相 比 其 他 数据 库 ,MySQL 具有 以 下 特点 和 优势 


MySQL 是 开源 的 ,所 以 不 需要 支付 额外 的 费用 ; 
MySQL 支持 大 型 的 数据 库 ,可 以 处 理 拥有 上 千 万 条 记录 的 大 型 数据 
MySQL 使 用 标准 的 SQL 数据 语言 形式 ; 


Python Java、Perl 和 PHP 等 ; 

MySQL 对 PHP 有 很 好 的 支持 ,PHP 是 目前 较 常用 的 Web 开发 语言 ; 

MySQL 支持 大 型 数据 库 ,支持 5000 万 条 记录 的 数据 仓库 ,32 位 系统 支持 的 最 大 表 
文件 为 4GB,64 位 系统 支持 的 最 大 表 文件 为 8TB; 

MySQL 是 可 以 定制 的 ,采用 了 GPL 协议 ,用 户 可 以 修改 源码 来 开发 自己 的 MySQL 


6.1.2 ”MySQL 数据 库 下 载 和 安装 


目前 针对 不 同 用 户 ,MySQL 提供 了 两 个 不 同 的 版 本 。 


MySQL Community Server: 社区 版 ,该 版 本 完全 免费 ,但 是 官方 不 提供 技术 支持 。 
MySQL Enterprise Server: 企业 版 , 它 能 够 高 性 价 比 地 为 企业 提供 数据 仓库 应 用 ， 
支持 ACID 事务 处 理 ,提供 完 整 的 提交 、 回 深 、 崩 溃 恢 复 和 行 级 锁定 功能 。 但 是 该 版 
本 需 付费 使 用 ,官方 提供 电话 及 文档 等 技术 支持 。 


目前 最 新 的 MySQL 版 本 为 MySQL 8, 可 以 在 官方 网 站 下 载 该 软件 ,如 图 6.1 所 示 。 首 
先 单 击 右 下 角 的 Download 超 链 接 ,然后 按照 提示 步骤 操作 就 可 以 将 MySQL 软件 下 载 到 
本 地 计算 机 中 了 。 
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Recommended Download: 


MySQL Installer N 
: for Windows Ee 协 
All MySQL Products. For All Windows Platforms. I E 部 


In One Package. 


Windows (x86, 32 & 64-bit), MySQL Installer MSI 
Other Downloads: 

Windows (x86, 64-bit), ZIP Archive 8.0.15 184.1M 

(mysqL-8.0.15-winx64zip) MD5: 75fd5cdz676209550agb9bac4fd0agb5 | Signature 

Windows (x86, 64-bit), ZIP Archive 8.0.15 2703M 

Debug Binaries & Test Suite 

(mysql8.0.15 -winx64 debug-testzip) MD5: 92bdd691744c1947f5defflc7ffae6le | Signature 


图 6.1 MySQL 官方 网 站 
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MySQL 下 载 完 成 后 ,找到 下 载 到 本 地 的 文件 ,按照 相关 安装 图 文 说 明 进 行 安装 即 可 。 
因为 安装 过 程 篇 幅 比较 长 ,这 里 就 不 做 介绍 了 。 

如 图 6.2 所 示 ,在 安装 的 过 程 中 安装 程序 会 需要 用 户 设置 一 个 MySQL Root Password, 这 
个 密码 是 数据 库 超级 管理 员 root 的 密码 ,用户 需 要 记 住 自己 设置 的 root 管理 员 的 密码 ,在 


AN MySQL Server Configuration 
MySQL. Installer na 


Root Account Password 


Enter the password for the root account. Please remember to store 
th password in a seaure place. 


MySQL Root Password: | 
Repeat Password: 


MysQL User Accounts 


Oreate MySQL user accounts for your users and apphcations 
Assgn arole to the user that conssts of 3 set of privieges. 
六 


Configuration 
MySQL Usemame Host User Role 


图 6.2 MySQL 配置 密码 和 新 增 用 户 界面 


完成 MySQL 数据 库 的 整个 安装 配置 过 程 后 ,用 户 打 开 任 务 管理 器 ,可 以 在 其 中 看 到 
MySQL 服务 进程 mysqld.exe 已 经 启动 了 ,这 说 明 MySQL 服务 器 正常 在 后 台 运 行 ,如 图 6.3 所 
示 。 至 此 ,说 明 用 户 在 Windows 上 顺利 地 安装 了 MySQL。 接 下 来 就 可 以 对 数据 库 进 行 操 
作 了 。 

安装 好 MySQL 数据 库 后 ,还 需要 在 CMD 命令 环境 下 对 MySQL 进行 启动 ,登录 ,操作 
数据 库 .操作 表 和 字段 、 录 入 数据 和 关闭 MySQL 数据 库 等 操作 ,详情 可 以 参考 MySQL 数 
据 库 手 册 和 相关 书籍 。 为 了 方便 操作 ,笔者 建议 读者 使 用 Navicat for MySQL 可 视 化 工具 ， 
详 见 6.2 节 的 讲解 ,该 工具 可 以 极 大 地 提高 数据 库 操作 效率 。 


6.1.3 ”使 用 phpStudy 安装 MySQL 


使 用 6.1.2 节 中 下 载 MySQL 数据 库 并 安装 的 方式 .过 程 比较 复杂 ,而 且 需 要 一 些 配置 
操作 ,很 多 读者 安装 到 最 后 会 发 现 无 法 启动 ,为 此 笔者 推荐 大 家 使 用 更 加 快捷 地 安装 
MySQL 的 方法 ,就 是 使 用 phpStudy 安装 MySQL 数据 库 。 

phpStudy 是 一 个 PHP 调试 环境 的 程序 集成 包 。 该 程序 包 集 成 最 新 的 Apache 十 PHP 
十 MySQL 十 phpMyAdmin 十 ZendOptimizer, 可 实现 一 次 性 安装 ,无 须 配 置 即 可 使 用 ,是 非 
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各 任务 管 理 器 
文件 (F) 选项 (0) 查看 V) 


名 称 状态 


怠 Microsoft Windows Search P- 
》 坊 Microsoft Windows Search ... 
多 MidwareUIMfc (32 位 ) 
De MYsqld.exe (32 位 
图 NVIDIA Container 
> 图 NVIDIA Container 
》 图 NVIDIA Container 
图 NvIDIA Container (32 位) 
》 图 NVIDIA Wireless Controller S... 
》 国 pcas service (32 位) 
狠 phpstudy (32 伺 ) 
》 国 PresentationFontCache.exe 
》 国 QQ 安全 防护 进程 (Q 盾 ) (32 位 ) 


< 


二 WicrosofE Windows Search P-…- 


进程 性 能 应 用 历史 记录 启动 用 户 详细 信息 服务 


29% 47% 0% 
CPU 内 存 磁盘 
0 TMVe UMS 
0% 13MB 0MB/ 秒 
0% 103MB 0MB/ 秒 
0% 0.8MB 0MB/ 秒 
0% 168MB 0MB/ 秒 
0% 3.4 MB 0MB/ 秒 
0% 13MB 0MB/ 秒 
0% 16MB 0MB/ 秒 
0% 6.5 MB 0MB/ 秒 
0% 04MB 0MB/ 秒 
0.2% 2.3 MB 0MB/ 秒 
0.3% 14.7MB 0MB/ 秒 
0% 07MB 0MB/ 秒 
0% 3.1MB 0.1MB/ 秒 


>) 简略 信息 (D) 


图 6.3 任务 管理 器 中 的 Mysqld.exe 


常 方便 、 好 用 的 PHP 调试 环境 。 该 程序 不 仅 包括 PHP 调试 环境 ,还 包括 开发 工具 .开发 手 
册 等 。 总 之 学 习 PHP 只 需 一 个 包 ,因为 它 集 成 了 MySQL 数据 库 ,而 且 不 需要 配置 ,这 就 给 
广大 开发 者 安装 MySQL 提供 了 一 种 更 加 快捷 的 方式 。 

先 到 phpStudy 的 官方 网 站 http://phpStudy.php.cn/ 下 载 最 新 的 版 本 ,下 载 到 本 地 后 
直接 安装 即 可 ,安装 过 程 如 同安 装 QQ 等 通用 软件 一 样 简单 ,所 以 这 里 不 做 介绍 。 安 装 完成 
后 用 户 可 以 打开 程序 ,以 phpStudy 2018 为 例 ,如 图 6.4 所 示 。 


留 phpstudy 2018 PHP-5.4.45 
运行 状态 phpstudy 启 停 
Apache: @ Ia 
wo 。 | 国 
提示 信息 ”运行 模式 ”切换 版 本 
Apache 已 经 停止 … 圈 系 统 服务 
ool 0 口 非 服务 模式 
16:07:32 口 自 检 服 条 
MySQL 已 经 启动 .… 16:07:32 应 用 
MysQL 管 理 器 
其 他 选项 菜单 


图 6.4 
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phpStudy 2018 启动 界面 
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开发 者 可 以 单 击 图 6.4 中 的 “启动 ”按钮 ,这 时 phpStudy 帮 开 发 者 启动 了 MySQL 数据 
库 和 Apache 服务 器 ,而 Apache 服务 器 又 是 做 小 程序 开发 时 不 需要 的 ,为 了 减轻 计算 机 的 
负担 ,读者 可 以 按照 图 6.5 来 操作 。 


® My Homepage 
查看 phpinfo 


图 6.5 只 启动 MySQL 


在 Windows 系统 的 任务 栏 中 找到 phpStudy 的 图 标 ,如 图 6.5 中 的 @@ 所 示 , 布 击 
phpStudy 图 标 , 然 后 鼠标 依次 移动 到 @ 服 务 器 管理 (MySQL 和 @ 田 启动 位 置 , 即 可 只 启动 
MySQL 而 不 必 启 动 Apache。 


6.2 ”可视化 工具 Navicat for MySOL 


6.2.1 Navicat 介绍 与 安装 


通过 6.1.2 节 和 6.1.3 节 的 学 习 ,MySQL 数据 库 已 经 可 以 被 顺利 安装 好 并 启动 了 。 但 
是 在 CMD 命令 环境 中 操作 MySQL 数据 库 还 是 比较 复杂 的 ,为 此 读者 可 以 使 用 可 视 化 的 
操作 工具 Navicat。 

Navicat for MySQL 是 管理 和 开发 MySQL 或 MariaDB 的 理想 解决 方案 。 它 是 一 套 单 
一 的 应 用 程序 ,能 同时 连接 MySQL 和 MariaDB 数据 库 , 并 与 Amazon RDS、Amazon 
Aurora、Oracle Cloud、Microsoft Azure、 阿 里 云 .腾讯 ”局 roicnirmsar 
云 和 华为 云 等 云 数据库 兼容 。 这 套 全 面 的 前 端 工 具 89 Ev wx IRD OW wy 
为 数据 库 管 理 、 开 发 和 维护 提供 了 一 款 直观 而 强大 的 | | 攻 呈 忆 
图 形 界 面 。 读 者 可 以 到 官方 网 站 付费 下 载 。 2 二 一 一 一 

双击 桌面 上 的 快捷 图 标 运 行 Navicat for 
MySQL ,然后 选择 菜单 “文件 ”1“ 新 建 连接 ”选项 来 新 
建 一 个 连接 ,如 图 6.6 所 示 。 


图 6.6 新 建 连接 
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在 图 6. 人 连接? 对话 框 中 ,连接 名 是 自己 定义 的 ,主机 名 localhost、 端 口号 3306 和 用 户 
名 root 是 软件 默认 填 上 的 ,密码 是 在 安装 MySQL 数据 库 的 时 候 自 己 设 置 的 。 如 果 采 用 


phpStudy 来 安装 的 MySQL, 则 密码 默认 也 是 root。 


连接 x 
军 规 高 委 SSL SSH HTTP 
连接 名 lanjid 
主机 名 或 IP 地 址 ; localhost 
其 口 : 3306 
用 户 名 : root 
褒 码 : [和 
回 保 存放 码 
国 | wn 
图 6.7 新 建 连接 


单 击 “ 确 定 ” 按 钮 即 完成 了 连接 的 建立 ,当然 在 创建 连接 之 前 需要 先 开 启 MySQL 数据 


库 , 和 否则 创建 连接 会 失败 。 
6.2.2 在 Navicat 中 创建 数据 库 


双击 6.2.1 节 中 创建 的 连接 lianjie, 读 者 会 发 现 有 
几 个 MySQL 预先 创建 好 的 数据 库 , 可 暂且 不 管 它们 。 
右 击 创建 好 的 连接 lianjie, 选 择 “ 新 建 数 据 库 ” 命 令 , 如 
图 6.8 所 示 。 

此 时 弹出 “创建 新 数据 库 ” 对 话 框 ,如 图 6.9 所 示 ， 
数据 库 名 自 定 义 为 xinwen,“ 字 符 集 ” 选 择 uft8 一 UTF-8 
Unicode,“ 校 对 ”选择 utf8_general_ci。 单 击 “ 确 定 ” 按 
钮 即 可 成 功 创建 数据 库 。 

在 图 6.10 中 双击 创建 的 数据 库 xinwen:' 右 击 
“ 表 ”, 选 择 “ 新 建 表 ”选项 ,弹出 的 窗口 如 图 6.11 所 示 。 
在 图 6.11 中 输入 id.,title、img、content 和 cTime 字段 
分 别 表示 一 条 新 闻 的 id 标题. 图片, 文章 内 容 和 发 表 时 
间 ,设置 好 它们 的 类 型 长度, 其 中 把 id 设置 为 关键 字 ， 
把 表 命 名 为 wenzhang。 
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连接 天 打开 表 陪 设 计 表 


图 6.8 ”新 建 数据 库 
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本 orke 
焰 information_schema 
各 mysql 
各 performance_schema 
种 test 


图 6.9 填写 数据 库 编 码 方式 


[| | 


图 wenzhang @xinwen (ianjie) = 
文件 编 徊 ”窗口 。 帮助 
本 新 建 园 保存 局 另存 为 河 运 0 医 位 部 插 入 位 丽 油 位 分 主 归 全 上 移 及 下 移 
栏 位 。 系 引 ”外 键 ”触发 器 远 项 注释 ”SQL 预 各 
各 类 型 长 度 。。 小数点 。 允许 空 值 ( 
> EE 1 0 oO Pi 
title varchar 255 回 
img varchar 50 0 
content text 0 0 回 
cTime varchar 10 0 回 
图 6.11 新 建 字 段 


完成 表 的 创建 之 后 ,可 以 向 表 中 录入 数据 ,如 图 6.12 所 示 。 至 此 ,数据 库 方面 的 准备 工 
作 就 完成 了 。 


B® wenzhang @xinwen (lianjie) 一 口 X 
文件 编 竹 ”查看 窗口 。 帮助 
加 导入 向 导 SL 和 AS Y 入 渤 向 S 图 网 个 查看 四 表单 查看 六 备注 国 ] 十 六 进位 加 图 像 各 > 升序 排序 。 。 


id tite img 
; 国 卫 因由 未 枚 前 ,那些 怠 拉 了" 的 B 子 /img/01jpg 
2 任正非 : 要 驹 于 与 美国 争夺 人 才 我 们 待遇 /img/02jpg 

3 高 通 半 果 专 利 侵权 实 放 订 结 率 ， 高 通 入 偿 /img/03jpg 


content cTime 

本 网 汛 (党 群 工作 部 ) 10 月 24 日 上 午 ，, 2019-03-15 
本 网 汛 (教务 处 ) 10 月 20-21 日 ,2018: 2019-03-15 
根据 国外 媒体 报道 ， 当 地 时 间 周 三 高通 2019-03-15 


4 3.15 后 多 家 电 商 APP 下 染 " 电 子 押 "关键 词 /img/04jpg 
5 还 有 什么 力量 能 把 大 得 推 上 3000 点 ? /img/05jpg 
6 市 场 监管 总 局 及 时 布置 失 视 3.15 史 会 溉 光 /img/06jpg 
7 纽约 : 大 批 武装 区 察 持 检 守卫 清真 寺 /img/07jpg 
8 与 人 民 在 一 起 习 近 于 的 两 全 时 间 。 /img/08jpg 
9 习近平 就 新 西关 枪 二 事件 向 新 西 兰 总督 雷 ; /img/09jpg 

10 十 三 届 全 国人 大 一 次 会 议 在 京 闭幕 /img/10jpg 


然 媒体 3 月 16 日 消息 ， 央 视 315 曝 光 " 电 3 2019-03-15 
本 周 ， 沪 措 在 3000 点 一 带 展 开 拉锯 , 各 2019-03-15 
3 月 15 日 中 央 电 视 台 3.15 噶 会 结束 后 , 才 2019-03-15 
3 月 16 日 报道 ,当地 时 间 3 月 15 日 ,新 西 2019-03-15 
2019 年 全 国 两 人 期间， 习近平 总 书记 六 2019-03-15 
新 华 社 北 京 3 月 15 日 电 国家 主席 习 近 王 3 2019-03-15 
新 华 社 北京 3 月 15 日 电 第 十 三 届 全 国人 E 2019-03-15 


图 6.12 录入 信息 


在 Navicat 中 导入 和 导出 数据 库 数 据 也 是 常用 的 操作 。 如 图 6.13 所 示 ,“ 转 储 SQL 文 
件 ? 是 把 建立 好 的 数据 导出 到 本 地 硬盘 形成 SQL 文件 ;“ 运 行 SQL 文件 ? 则 是 将 硬盘 上 的 
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SQL 文件 导入 到 MySQL 数据 库 中 来 使 用 。 


连接 四 打开 表 陪 设 Ht 表 
vv 本 laie 国 wenzhane 
图 information schema 
图 mysql 
图 performance_schema 


图 6.13 导入 /导出 数据 库 数据 


6.3 基于 Java 的 后 端 JSON 接口 


微 信 小 程序 没有 提供 直接 和 MySQL 数据 库 连 接 的 接口 ,而 是 采用 前 端 小 程序 连接 后 
端 程序 , 青 通 过 后 端 程序 连接 数据 库 的 方式 来 间接 连接 数据 库 。 前 端 小 程序 连接 后 端 程序 
是 通过 小 程序 网 络 接口 wx.request() 来 实现 的 ,因为 wx.request() 只 能 读 取 JSON 格式 的 
数据 ,所 以 后 端 程序 要 形成 JSON 数据 才 可 以 供 前 端 小 程序 使 用 。 而 后 端 程序 可 以 选择 自 
己 熟悉 的 语言 来 开发 ,例如 PHP 或 者 Java, 本 书后 续 的 后 端 代码 将 统一 采用 Java 来 编写 。 
图 6.14 描述 了 前 端 \ 后 端 和 数据 库 之 间 的 关系 。 


后 端 3 
前 端 | werequest JSON JDBC 数据 库 


图 6.14 小 程序 和 数据 库 的 交互 示意 图 


6.3.1 JDBC 


JDBC 英文 全 称 为 Java Data Base Connectivity (Java 数据 库 连 接 ) ,可 以 为 多 种 关系 数 
据 库 提供 统一 的 访问 。JDBC 是 Sun 开发 的 一 套数 据 库 访问 编程 接口 ,是 一 种 SQL 级 的 
API。 它 由 Java 语言 编写 完成 ,具有 很 好 的 跨 平台 特性 ,使 用 JDBC 编写 的 数据 库 应 用 程序 
可 以 在 任何 支持 Java 的 平台 上 运行 ,而 不 必 在 不 同 的 平台 上 编写 不 同 的 应 用 程序 。 

JDBC 的 主要 功能 如 下 : 
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(1) 建立 与 数据 库 或 者 其 他 数据 源 的 连接 。 

(2) 向 数据 库 发 送 SQL 命令 。 

(3) 处 理 数 据 库 的 返回 结果 。 

JDBC 常用 接口 有 连接 到 数据 库 (Connection) 、 建 立 操作 指令 (Statement) ,执行 查询 指 
令 (executeQuery) 和 获得 查询 结果 (ResultSet) 等 。 

[ 圆 6-1 JDBC 连接 MySQL 数据 库 代码 演示 。 

package request; 


import java. sql. DriverManager; 
import java. sql. ResultSet; 


import java. sql. SQLException; 
import java. sql. Statement; 
import java. sql. Connection; 
import java. sql. DriverManager; 
import java. sql. SQLException; 
public class jdbc { 
public static void main(String[ ] args) throws ClassNotFoundException, SQLException 

{ 

String uri= "jdbc:mysql://127.0.0.1 :3306/xinwen?useUnicode = true&amp; 

characterEncoding = utf — 8"; 

String user = "root"; 

String password = "root"; 

Class. forName( "com. mysql. jdbc. Driver"); // 加 载 JDBC 启动 程序 

// 创 建 第 一 个 Connection 类 型 的 con 对 象 来 建立 连接 

Connection con = DriverManager. getConnection(uri, user, password); 

// 创 建 第 二 个 Statement 类 型 的 对 象 st 作为 sql 语句 的 载体 实现 增删 改 查 

Statement st = con. createStatement(); 

ResultSet rs= st.executeQuery("select * from wenzhang"); 

// 处 理 数据 库 的 返回 结果 (使 用 ResultSet 类 ) 

while(rs. next()){ 
System. out. println(rs. getString("title")+" "+rs.getString("cTime"));} 
// 关 闭 资源 

rs.close( ); 

st. close( ); 

con. close( ); 

} 
} 


【代码 讲解 】 本 例 连 接 6.2.2 节 中 创建 的 xinwen 数据 库 下 面 的 wenzhang 表 中 的 内 
容 , 并 读 取 了 表 中 的 标题 和 时 间 两 列 字 段 。 本 例 代码 主要 实现 了 加 载 JDBC 驱动 程序 、3 个 
对 象 的 建立 和 释放 ,其 中 3 个 对 象 指 的 是 Connection 类 型 的 con、Statement 类 型 的 st 和 
ResultSet 类 型 的 rs。 在 读 到 数据 之 后 使 用 while 循环 来 输出 数据 ,因为 代码 是 带 有 main 
函数 的 Java 函数 ,所 以 输出 结果 在 Console 中 显示 。JDBC 是 Java 和 JSP 课程 的 内 容 ,读者 
可 以 参考 相关 书籍 。 需 要 说 明 的 是 ,本 书 中 后 端 Java 部 分 的 开发 工具 是 MyEclipse 2015 版 
本 ,当然 其 他 的 开发 工具 不 影响 结果 的 正确 性 。 而 连接 数据 库 是 需要 有 JDBC 启动 程序 的 ， 
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开发 者 计算 机 上 的 MySQL 版 本 不 一 样 ,JDBC 启动 程序 的 版 本 也 需要 不 一 样 ,笔者 采用 的 
是 mysql-connector-java-5.1.41-bin.jar, 读 者 也 可 以 拥有 适合 自己 的 JDBC 启动 程序 。 程 序 
运行 结果 如 图 6.15 所 示 。 


EESLIS Console Servers Workspace Migration 、JAX-WS Annotations 


<terminated> jdbc Uava Application] D:Java\ydk\binVjavaw.exe (2019 年 3 月 16 日 下 午 7:47:16) 
3.15 后 多 家 电 商 APP 下 架 * 电 子 烟 ”关键 词 2919-93-15 

还 有 什么 力量 能 把 大 盘 推 上 3888 点 ? 2819-83-15 

市 场 监管 总 局 及 时 布置 央视 3-15 晚 会 曝光 案件 查处 工作 2019-83-15 

纽约 ， 大 批 武装 警察 持 枪 守卫 清真 寺 2919-93-15 

与 人 民 在 一 起 一 习近平 的 两 会 时 间 2619-83-15 

习近平 就 新 西 兰 枪击 事件 向 新 西 兰 总 督 雷 迪 致 慰问 电 2919-93-15 

十 三 届 全 国人 大 二 次 会 议 在 京 闭幕 2019-63-15 


6.3.2 JSON 接口 


有 了 JDBC, 只 是 Java 程序 可 以 读 取 到 数据 库 的 数据 ,但 是 小 程序 只 能 读 取 JSON 格式 

的 数据 ,也 就 是 说 开发 者 在 读 取 数 据 库 数据 的 时 候 需 要 进行 JSON 格式 处 理 。 考 虑 到 
wx.request() 需 要 以 Web 的 方式 来 访问 数据 ,开发 者 需要 找到 一 种 合适 的 方法 来 改造 例 6-1 中 
的 呈现 方式 ,笔者 选择 了 Servlet 的 方式 。 对 于 Servlet 的 理解 ,读者 可 参考 JSP 的 相关 书 
籍 ,可 以 简单 地 理解 为 Servlet 是 可 以 Web 访问 的 Java 程序 , 即 例 6-1 的 Java 程序 呈现 结 
果 都 在 控制 台中 显示 ,而 Servlet 是 把 结果 呈现 在 Web 浏览 器 上 。 
加 。 。 [ 贺 ] 6-? 使 用 Servlet 读 取 数据 库 数据 ,并 以 JSON 格式 来 呈现 。 

如 图 6.16 所 示 , 先 创建 一 个 Web 项 目 mini, 然 后 在 项 目的 sre 目录 下 创建 一 个 
包 request , 右 击 request 包 , 选 择 New| Servlet 选项 ,弹出 Create Servlet 对 话 框 ,如 
图 6.17 所 示 。 


~ 四 mini 
》 血 Deployment Descriptor mini 
» ®® Deployed Resources 
> Bh JavaScript Resources 


氏 Import project from file system 


Get started on something new! 


CistsB a 


》 


> 可 Apac| ”Gomto e 

> wh JSTL Open Type Hierarchy F4 @ Class 

> 人 E Webf Show In Alt+Shift+W> G Enum 
> Bneizhijia Copy Ctrl#C @ Interface 
> 全 Servers 宜 Copy Qualified Name 省 Package 
> 留 struts21 身 Paste CtrtV 冶 Filter Ey 
>Bstudy % Delete Delete nt 
》 多 Typecol Remove from Context Ctrl+Alt+Shift+Down a 
》 贸 validate Build Path 》 口 Example- 


图 6.16 新 建 Servlet 


在 图 6.17 中 ,只 有 Class name 一 项 需 填写 ,其余 都 是 MyEclipse 软件 自动 填 上 的 。 接 
下 来 编辑 代码 如 下 : 
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图 create servlet fs 
Create Serviet G 
@ Warning: By convention, Java type names usually start with an 

uppercase letter 
Project: mini % 
Source folder: |/mini/src Browse... 
Java package: |request Browse... 


Classname: llist 


Superclass: «& [javax.serviet.http.HttpServiet Browse... 


口 use an existing servlet class or JSP 


Classname: |list 


@ Next > Finish Cancel 


图 6.17 填写 Servlet 的 类 名 字 


package request; 
import java. io. IOException; 
import javax. servlet. ServletException; 
import javax. servlet.annotation. WebServlet; 
import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import java. io. IOException; 
import java. io. PrintWriter; 
import java. sql. *; 
import net. sf. json. JSONArray; 
import net. sf. json. JSONObject; 
/ xxx Servlet implementation class list */ 
@WebServlet("/list") 
public class list extends HttpServlet { 
private static final long serialVersionUID = 1L; 


/xxx (@ see HttpServlet#HttpServlet()*/ 
public list() { 
super( ); 
//TODO Auto - generated constructor stub 
’} 
/xxx @see 
HttpServlet # doGet(HttpServletRequest request, HttpServletResponse response) 
*/ 
protected void doGet (HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 
response. setContentType( "text/json; charset = utf — 8"); 
PrintWriter out = response.getWriter(); 
try { 
Class. forName( "com. mysql. jdbc. Driver" ); 
String url = "jdbc:mysql://localhost/xinwen?user = root&password 
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= root&useUnicode = true&characterEncoding= UTF — 8"; 
Connection con = DriverManager. getConnection(url1); 
Statement stmt = con.createStatement(); // 创 建 Statement 对 象 
String sql; 
sql = "SELECT * FROM wenzhang"; 
ResultSet rs = stmt.executeQuery(sqgl); 
JSONArray jsonarray = new JSONArray(); 
JSONObject jsonobj = new JSONObject(); 


// 展 开 结 果 集 数据 库 

while(rs. next()){ 

// 通 过 字段 检索 

jsonobj. put("id", rs.getString("id")); // 这 个 是 返回 的 内 容 1 
jsonobj. put ("title", rs.getString("title")); // 这 个 是 返回 的 内 容 2 
jsonobj. put("img", rs.getString("img")); // 这 个 是 返回 的 内 容 3 
jsonobj. put("cTime", rs.getString("cTime")); // 这 个 是 返回 的 内 容 4 


jsonarray. add( jsonobj); 
} 
// 输 出 数据 
out = response. getWriter(); 
out. println(jsonarray); 
// 完 成 后 关闭 
rs.close(); 
stmt. close( ); 
con. close( ); 
}catch (Exception e) 
{ out. print("get data error!"); 
e. printStackTrace(); } 


} 
/ xxx @see HttpServlet# doPost(HttpServletRequest request, HttpServletResponse response) */ 
protected void doPost (HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 
this. doGet (request, response); 


} 


【代码 讲解 】 本 例 中 连接 的 仍 是 6.2.2 节 中 创建 的 xinwen 数据 库 下 面 的 wenzhang 表 
中 的 内 容 , 并 读 取 了 表 中 的 id\title、img 和 cTime 4 个 字段 。 从 功能 代码 上 看 ,和 例 6-1 中 
的 功能 差不多 ,但 是 多 了 以 下 两 行 代码 : 

JSONArray jsonarray = new JSONArray(); 

JSONObject jsonobj = new JSONObject(); 
其 中 ,jsonobj 用 来 存放 从 数据 库 中 读 取 的 一 行 数据 , 它 是 JSON 格式 , 即 程序 已 经 把 数据 处 
理 成 了 JSON 格式 ; jsonarray 是 JSONArray 类 型 ,是 把 一 行 一 行 的 JSON 格式 的 数据 封装 
成 一 个 数组 。 

关于 Servlet 代码 结构 ,需要 说 明 的 是 : 开发 者 只 需要 关注 doGet 和 doPost 方法 ,核心 
代码 写 在 doGet 和 doPost 方法 中 即 可 。Get 请 求 . 调 用 doGet 方法 ; Post 请 求 , 则 调用 
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doPost 方法 。 为 了 保险 起 见 , 如 果 核 心 代码 写 在 了 doGet 里 ,就 应 在 doPost 方法 中 加 上 
“this.doGet(request, response);” 这 条 语句 ,这 相当 于 在 doGet 方法 中 把 代码 复制 了 一 份 

到 doPost 方法 中 。 

另外 ,因为 每 一 个 Tomcat 服务 器 包 中 含有 的 JAR 包 是 不 一 样 的 ,本 例 中 需要 用 到 
mysql-connector-java-5. 1. 41-bin. jar、commons-beanutils-1. 8. 0. jar、 commons-lang-2. 5. jar、 
commons-collections-3.2.1.jar .commons-logging-1.1.1.jar、.ezmorph-1.0.6.jar ,json-lib-2.3. 
jar、mysql-connector-java-5.1.41-bin.jar 和 servletrapi.jar, 缺 少 上 述 JAR 文件 的 读者 可 以 自 
行 下 载 。 

如 果 程 序 调 试 正 确 的 话 ,运行 结果 将 如 图 6.18 所 示 ,数据 的 最 外 层 是 一 对 中 括号 ,表示 
是 一 个 JSON 数组 ,而 数组 的 里 面 是 一 个 一 个 的 大 括号 ,大 括号 中 的 数据 是 JSON 对 象 ,对 
应 于 数据 库 中 的 一 行 数据 。 有 了 JSON 数据 ,小 程序 前 端 就 可 以 访问 了 。 


国 127.0.0.1:8080/mini/list 小 
€)>3C 侈 ©® 127.0.0.1:8080/mini/list 日 一 会 疏 四 bt 多 三 
国 火 帮 言 方 站 点 ”各 新 手 上 路 “ 国 常用 网 址 园 京 东 高 二 口 移动 版 蔬 和 


If id”:”1”, “title”: 号 转 网 来 临 前 ， 那些 的 四 Fs :"/img/01. jpg”, “cTime”: "2019- 03-15”}， 
”2019-03-15”}， 

2019-03-15”}， 

.clinme”: "2019-03-15"}, 


172019-03-15”} ， 


多 家 

渤 有 人 么 力 遇 能 把 大 全 
“: “市 场 监管 总 局 
Time”:” 2019-03-15”}, 人 


/08. jpg”, “cTime”: “2019-03 
电 ”, “img”:“/img/09. jpg”, “cTime” : “20: id 
磊 ", “img”:“/img/10. jpg”, “cTime”:”2019-03-15”}] 


向 新 西 兰 总 督 
-三 届 全 国人 大 -次 会 议 在 京 闭 


图 6.18 ”Servlet 读 出 来 的 JSON 格式 数据 


6.4 数据 库 操 作 


在 Web 环境 中 发 起 HTTPS 请 求 是 很 常见 的 .但 是 微 信 小 程序 是 腾讯 内 部 的 产品 ,不 能 
直接 打开 一 个 外 部 的 链接 。 例 如 ,在 微 信 小 程序 里 面 无 法 直接 打开 www.taobao.com 网 站 ,但 
是 ,在 小 程序 开发 的 时 候 , 如 果 需 要 请 求 一 个 网 站 的 内 容 或 者 服务 ,如 何 实现 ?虽然 微 信 小 
ee 但 是 腾讯 为 开发 者 封装 好 了 一 个 wx.request(object) 的 

I。 在 6.2 节 和 6.3 节 的 基础 上 ,开发 者 已 经 准备 好 了 数据 库 和 JSON 格式 的 数据 读 取 接 
| ed wx.request() 接 口 来 获取 后 端的 数据 了 。 


6.4.1 wx.request() 接 口 

wx.request() 是 腾讯 公司 封装 好 的 一 个 request 请 求 的 函数 ,类 似 于 其 他 程序 语言 的 自 
带 函数 ,开发 者 只 需 把 这 些 内 置 函 数 复制 过 来 使 用 即 可 ,无 须 注意 函数 底层 代码 实现 部 分 。 
wx.request() 接 口 属性 如 表 6.1 所 示 。 
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表 6.1 wx.request() 属 性 表 


属 性 类 型 默认 值 必 填 说 明 
url string 是 | 开发 者 服务 器 接口 地 址 
data string|object| ArrayBuffer 和 否 | 请 求 的 参数 
; 设置 请 求 的 header,header 中 不 能 设置 Referer。 
header Object 否 和 es 
content-type 默认 为 application/json 
method string GET | 否 |HTTP 请 求 方法 
dataType string json | 否 | 返回 的 数据 格式 
responseType | string text 否 | 响应 的 数据 类 型 
Success function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 


微 信 公 众 号 平台 官方 给 出 的 wx.request() 示 例 代 码 如 下 : 


wx. request({ 


url: 'test.php', 


data: { 
二 
yi" 


}, 


header: { 


'content — type': 'application/json' 


}, 


success(res) { 


console. log(res. data) 


} 
}) 


1) 接口 地 址 url 
微 信 小 程序 里 面 的 数据 是 由 接口 地 址 url 来 获取 的 , 它 非常 重要 。 接 口 地 址 url 就 是 6. 
3.2 节 中 的 Servlet 地 址 ,其 返回 结果 是 JSON 格式 数据 。 因 为 JSON 格式 数据 不 仅 处 理 起 
来 方便 ,而 且 传 输 安 全 稳定 ,容易 保存 。 所 以 ,一 般 的 第 三 方 服务 商 提供 的 接口 返回 的 数据 
都 是 以 JSON 格式 返回 的 。 
url 是 特殊 的 JSON 格式 数据 ,一 般 是 开发 者 专门 开发 的 或 第 三 方 服务 商 提供 的 接口 地 
址 。 例 如 快递 查询 和 天 气 预报 等 功能 在 网 络 上 都 有 相应 JSON 接口 的 调用 地 址 ,其 中 一 些 
接口 是 商业 收费 的 。 
2) 请 求 参数 data 
当 小 程序 前 端 对 url 发 起 HTTPS 请 求 时 ,实际 上 跟 在 浏览 器 打开 一 个 网 址 是 一 个 道 
理 , 在 浏览 器 打开 网 址 http://127.0.01:8080/mini/detail? id 一 5, 实 际 上 是 向 这 个 域名 所 
在 的 服务 器 发 送 了 一 个 HTTPS 请 求 , 在 这 个 请 求 里 面 使 用 了 参数 id=5, 这 里 的 id=5 是 
在 请 求 url 时 需要 传递 过 去 的 参数 。 


url:'http://127.0.01:8080/mini/detail', 


data: { 


"5" 


} 
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等 价 于 : 
url:' http://127.0.01:8080/mini/detail?id= 5" 


3) 请 求 的 header 
HTTPS 请 求 的 header 是 在 用 户 打开 小 程序 ,请 求 url 时 一 起 传 到 url 所 在 的 服务 器 时 
的 头 部 信息 ,如 果 学 过 HTTP 协议 ,这 个 就 容易 理解 了 。 
method: 'GET'， 
header: { 
'content — type': 'application/json' 
} 
method: 'POST', 
header: { 
'content — type': 'application/x — www — form— urlencoded' 
}, 
当前 端 只 向 后 端 获 取 数据 ,method 方法 可 以 取 值 'GET', 此 时 header 的 'content-type' 应 该 
取 值 'application/json'。 当 前 端 需要 向 后 端 传递 参数 的 时 候 , method 应 该 取 值 'POST' ,此 
时 'content-type' 取 值 'application/x-www-form-urlencoded'。 
4) success 隐 数 
当 一 个 HTTPS 请 求 成 功 时 ,小 程序 就 会 自动 触发 这 个 返回 成 功 信息 的 函数 ,这 个 函数 
是 腾讯 公司 封装 好 的 函数 无 须 开发 者 自己 编写 。 开 发 者 获取 的 JSON 数组 在 res.data 中 。 


6.4.2 ”基于 数据 库 的 新 闻 列 表 页 案例 


有 了 6.2 节 和 6.3 节 的 基础 ,笔者 已 经 写 好 了 小 程序 读数 据 库 数据 的 后 端 部 分 ,现在 只 
需要 编写 小 程序 前 端 部 分 就 可 以 读 6.3 节 中 准备 好 的 JSON 数据 了 。 微 信 加 wpmen 辐 ] 
小 程序 实现 前 端 和 后 端的 网 络 交互 的 功能 封装 在 wx.request() 接 口中 。 二 站 

[ 贺 6-3 基于 MySQL 数据 库 的 新 闻 列表 页 的 实现 。 

pages/list/list.wxml 文件 代码 如 下 : 


< View class = "body"> 
<! -- 文章 列表 模板 begin -- > 
< template name = "itmes"> 
< navigator url = "../../pages/detail/detail?id= {{id}}" 
hover - class = "navigator - hover"> 
<view class = "imgs">< image src= "{{img}}" class = "in— img" 
background - size = "cover" model = "scaleToFill"></image ></view> 
<view class = "infos"> 
<view class = "title">{ {title}}</view> 
<view class = "date">{{cTime} }</view > 
</view> 
</navigator > 
</template> 
<! -- 文章 列表 模板 end -一 > 
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<! -- 循环 输出 列表 begin -一 > 
< view wx:for="{{shuzu}}" class = "list"> 

< template is = "itmes" data = "{{...item}}”/> 
</view> 


</view> 


【代码 讲解 】 list.wxml 使 用 了 wx: for 泻 染 和 模板 组 件 template, 每 一 次 循环 就 从 
JSON 数组 中 读 一 个 对 象 ,并 把 该 JSON 对 象 的 img.title 和 cTime 3 个 属性 显示 出 来 。 关 
于 后 端 代码 ,可 以 参看 6.3 节 内 容 。 

pages/list/list.js 文件 代码 如 下 : 


Page({ 
/ xxx 页 面 的 初始 数据 *xx / 
data: { 
4d1:1, 
shuzu: [] 
}, 
/*x* 生命 周期 函数 -一 监听 页 面 加 载 **xx / 
onLoad: function(options) { 
var that = this 
wx. request({ 
url: 'http://127.0.0.1:8080/mini/list', // 仅 为 示例 ,并 非 真 实 的 接口 地 址 
data: { 
i 
Y: 
} 
header: { 
'content - type': 'application/json' // 默 认 值 


}, 
success(res) { 
console. log(res) 
that. setData( { 
shuzu: res. data 
}) 
} 
}) 
}, 
dian:function(e) 
{ 
var a= e.target. id 
console. log(a) 
wx. navigateTo( { 
url:"/pages/detail/detail?id=" +a, 
}) 
}, 
/xxx 用 户 点 击 右 上 角 分 享 */ 
onShareAppMessage: function() { 
} 
]) 
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【代码 讲解 】 list.js 中 的 onLoad 函数 使 用 wx.request() 接 口 向 http://127.0.0.1: 
8080/mini/list 发 起 网 络 请 求 , success 返回 JSON 数组 ,并 把 它 以 数据 绑 定 的 方式 传 给 
list.wxml 文件 。dian:function() 是 list.wxml 中 定义 的 点 击 事件 ,负责 跳 转 到 详情 页 detail. 
wxml。 


pages/list/list.wxss 文件 代码 如 下 : 


.body{ 
height: 100 %;display: flex; 
flex- direction: column; padding: 20rpx; 
} 
navigator { overflow: hidden;} 
.list {margin— bottom: 20rpx;height: 200rpx;position: relative;} 
.imgs {float: left;} 
, imgs image {display: block; width: 200rpx;height: 200rpx;} 
.infos {float: left; width: 480rpx; height: 200rpx;padding: 20rpx 0 0 20rpx;} 
.title {font - size: 20px;} 
.date {font - size: 16px;color: #aaa; position: absolute;bottom: 0;} 
.loadMore {text - align: center;margin: 30px;color: #aaa;font - size: 16px} 
page{ 
background - color: #dld3d4; 
} 


【代码 讲解 】 list.wxss 使 用 pagef } 标 签 选择 器 对 页 面 的 背景 色 进 行 设置 。 
程序 运行 结果 如 图 6.19 所 示 。 


携 号 转 网 来 临 前 ， 那 
些 “ 狼 来 了 ”的 日 子 


2019-03-15 
任正非 : 要 敢于 与 美国 
争夺 人 才 我 们 待遇 可 


2019-03-15 


高 通 苹果 专利 侵权 案 庭 
审结 束 ， 高 通 赔偿 


2019-03-15 


3.15 后 多 家 电 商 APP 下 
架 “ 电 子 烟 ”关键 词 
2019-03-15 

还 有 什么 力量 能 把 大 盘 
推 上 3000 点 ? 


四 2019-03-15 


图 6.19 新 闻 列表 页 运行 结果 
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贺 |64 6.4.2 节 已 经 实现 了 基于 MySQL 数据 库 的 新 闻 列 表 页 ,现在 要 做 的 是 进一步 
实现 详情 页 。 
src/servlet/detail.java 代码 如 下 : 


package request; 


import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
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基于 数据 库 的 新 闻 详 情 页 案例 


java. io. IOException; 

java. io. PrintWriter; 

java. sql. Connection; 

java. sql. DriverManager; 

java. sql. ResultSet; 

java. sql. Statement; 

javax. servlet. ServletException; 

javax. servlet. annotation. WebServlet; 
javax. servlet. http. HttpServlet; 

javax. servlet. http. HttpServletRequest; 
javax. servlet. http. HttpServletResponse; 
net. sf. json. JSONArray; 

net. sf. json. JSONObject; 


/xxx Servlet implementation class detail */ 
@WebServlet("/detail") 


public 


class detail extends HttpServlet { 


private static final long serialVersionUID = 1L; 
/xxx (@see HttpServlet#HttpServlet()*/ 
public detail() { 


} 


super( ); 
//TODO Auto - generated constructor stub 


/xxx see HttpServlet# doGet(HttpServletRequest request, 
HttpServletResponse response) */ 


protected void doGet (HttpServletRequest request, HttpServletResponse response) throws 


ServletException, IOException { 
response. setContentType( "text/json; charset = utf — 8"); 
PrintWriter out = response. getWriter(); 
response. setHeader( "Access - Control - Allow ~ Origin", "x* "); 
response. setHeader( "Access - Control - Allow - Methods", "GET,POST"); 
String id = request. getParameter("id"); 
int idl = Integer. parseInt(id); 
System. out. println("id= "+ id); // 验 证 数据 传递 情况 
try { 
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Class. forName( "com. mysql. jdbc. Driver"); 

String url = "jdbc:mysql://localhost/xinwen?user = root&password = 
root&useUnicode = true&characterEncoding = UTF — 8"; 

Connection con = DriverManager. getConnection(url); 

Statement stmt = con.createStatement(); 

String sql = "SELECT x FROM wenzhang where id=" +idl; 
ResultSet rs = stmt.executeQuery(sql); 

JSONArray jsonarray = new JSONRrray( ) ; 

JSONObject jsonobj = new JSONObject(); 

while(rs. next()){ 
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jsonobj. put("title", rs.getString("title")); 
jsonobj. put("cTime", rs.getString("cTime")); 
jsonobj. put("img", rs.getString("img")); 
jsonobj. put("content", rs.getString("content")); 
jsonarray. add( jsonobj); 
} 
out = response. getWriter(); 
out. println(jsonarray); 
rs.close( ); 
stmt. close( ); 
con. close( ); 
}catch (Exception e) { 
out. print("get data error!"); 
e.printStackTrace( ); } 
} 
/ xxx (@see HttpServlet# doPost(HttpServletRequest request, HttpServletResponse response) */ 
protected void doPost (HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 
this. doGet (request, response); 
} 
} 


【代码 讲解 】 本 例 和 列表 页 的 JSON 接口 最 大 的 区 别 是 doGet 函数 的 开头 部 分 多 了 两 
行 代码 : 


response. setHeader("Rccess - Control ~ Allow — Origin", " * "); 
response. setHeader ("Access — Control - Allow - Methods", "GET, POST" ) ; 


这 两 行 代码 是 接收 到 小 程序 参数 的 关键 设置 ,有 了 它们 之 后 “request. getParameter 
("id");” 才 能 起 作用 。“*String sql = "SELECT * FROM wenzhang where id 一 "十 idl1;” 
则 是 去 查找 指定 id 的 行 。 

如 果 程 序 调 试 正确 ,访问 网 址 http://127.0.0.1:8080/mini/detail?id 二 5 就 可 以 读 出 数 
据 库 中 的 一 行 记录 ,并 且 以 JSON 格式 呈现 ,如 图 6.20 所 示 。 


网 127.0.0.1:8080/mini/detail?ic X 


fi> QG 个 © 127.0.0.1:8080/mini/detail?id=5 器 … 个 惟 四 多 三 
镜 火狐 言 方 站 点 戎 新 手 上 路 羡 常用 网 址 图 京东 商城 口 移动 版 书签 


什么 力量 能 把 大 盘 推 上 3000 点 ?“,“ “: “2019-03-15”, “img”:“/img/05. jpg”， “content”:“ 本 周 ， 
点 一 带 展开 拉锯 ， 各 路 题材 你 方 唱 喷 我 登场 ， 热 闹 之 余 ， 行 情 也 走向 分 化 。\r\Vn\r\n 周 五 ，A 股 三 大 股指 早 
午后 小 幅 回调 。 截 至 收盘 ， 上 证 指数 报 3021. 1. 04%: 深 证 成 指 报 9550. 54 涨 1. 41%; 创业 
板 指 报 1662. 62 点 ， 上 涨 0. 75%。\r\n\r\n 盘 面 上 ， 天 有 这 且 区 于 和- 白酒 板块 升温 ， 顺 鑫 农业 涨停 ， 老 白 干 酒 、 今 
世 缘 涨 逾 7%。 科 技 类 题材 股 继续 调整 ， 边 缘 计 算 、 电 力 物 联网 等 题材 跌幅 靠 前 。“}] 


图 6.20 详情 页 的 JSON 结果 


pages/detail/detail.wxml 的 代码 如 下 : 


<! -- detail. wxml ——> 
< view class = "warp"> 
< view wx:for = "{{shuzu}}"> 

<view class = "title">{{itenm. title}}</view> 

< View class = "cTime">{ {item. cTime} }</view> 

< view class = "img">< image src = "{{item. img}}" class = "in— img" 


223 


开发 从 入 门 到 实战 微 课 视频 版 


background - size = "cover" model = "scaleToFill"></image ></view> 
< view class = "content">{{item. content} }</view> 
< view class = "close" bindtap = "closepage"> 返回 </view> 
</view></view > 


【代码 讲解 】 detail.wxml 和 6.4.2 节 中 的 list.wxml 的 功能 近似 ,不 过 本 例 的 shuzu 数 
组 只 是 一 条 数据 库 记 录 的 JSON 数据 。 
pages/detail/detail.js 的 代码 如 下 : 


//detail. js 
// 获 取 应 用 实例 
var app = getApp() 
Page({ 
data: { 
zl 
shuzu: [] 
}, 
onLoad: function(options) { 
//this. setData({ 
//idl: decodeURIComponent(options. id), 
//}) 
var that = this 
wx. request ({ 
url: 'http://127.0.0.1:8080/mini/detail', // 仅 为 示例 ,并 非 真实 的 接口 地 址 
data: { id: decodeURIComponent(options. id) }, 
method: 'POST', 
header: { 
'content - type': 'application/x- www- form- urlencoded' // 默 认 值 
} 
Success(res) { 
console. log(res. data) 
that. setData( { 
shuzu: res. data 
}) 
} 
}) 
}, 
closepage: function(){ 
wx. navigateBack( ) 
}, 
toastChange: function(){ 
this. setData( {toastHidden:true}) 
wx. navigateBack( ) 
}, 
}) 


【代码 讲解 】 本 例 中 的 decodeURIComponent(options.id) 是 list.wxml 中 带 参数 的 url 被 
点 击 之 后 得 到 的 ,例如 在 list wxml 中 点 击 了 id 为 5 的 那 篇 文章 , 则 decodeURIComponent 
(options.id) 就 等 于 5, 这 样 就 可 以 去 查看 指定 文章 的 详情 页 了 。 本 例 中 要 注意 header 的 写法 。 
pages/detail/ detail.wxss 的 代码 如 下 : 


.warp { 
height: 100 %; display: flex; 
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flex- direction: column; padding: 20rpx; 
font — size: 16px; 
} 
.title { 
text — align: center; padding: 20rpx; 
font - size: 20px; 
} 
.CcTime { 
color: #aaa; 
} 
-img { 
text ~ align: center; padding: 20rpx; 
} 
. img image { 
width: 120px; height: 120px; 
} 
.content { 
text — indent: 2em; 
} 
,close { 
text ~ align: center; margin: 30px; 
font - size: 20px; color: #aaa 
} 
pagef 
background - color: #dld3d4; 
} 


程序 运行 结果 如 图 6.21 所 示 。 


任正非 : 要 敢于 与 美国 争夺 人 才 
我 们 待遇 比 他 们 高 


2019-03-15 


Fr 


' 


本 网 讯 (教务 处 ) 10 月 20-21 日 ， 
2018 年 教育 部 一 一 中 国联 通 职 业 院 校 骨干 
教师 “网 络 学 习 空间 人 人 通 ” 中 职 教师 专项 
培训 在 我 校 4-101 报 告 厅 举 行 。 校 长 黄 张 、 
校长 助理 李 才 出 席 了 此 次 活动 ， 共 有 来 自 北 
京 、 上 海 、 福 建 、 广 东 等 省 市 的 近 150 名 中 
职 学 校 的 领导 和 骨干 教师 参加 了 本 次 培训 。 
开 班 仪式 由 校长 助理 李 才 主持 。 编者 注 : 3 
月 16 日 凌晨 消息 ， 华 为 心声 社区 发 布 了 任 
正 非 在 俄罗斯 与 科学 家 及 专家 们 的 对 话 ， 任 
正 非 表示 ， 要 敢于 与 美国 争夺 人 才 , 我 们 可 
以 待遇 比 他 们 高 。 同 时 要 提高 俄罗斯 大 学 教 


图 6.21 详情 页 的 执行 效果 
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6.5 数据 缓存 Storage 


在 Web 开发 中 ,服务 器 可 以 为 每 个 用 户 创建 一 个 会 话 对 象 (session 对 象 ) ,注意 : 一 个 
浏览 器 独占 一 个 session 对 象 (默认 情况 下 ) 。 因 此 ,在 需要 保存 用 户 数据 时 ,服务 器 程序 可 
以 把 用 户 数据 写 到 用 户 浏 览 器 独占 的 session 中 , 当 用 户 使 用 浏览 器 访问 其 他 程序 时 ,其 他 
程序 可 以 从 用 户 的 session 中 取出 该 用 户 的 数据 。 

很 多 人 学 了 JSP 和 PHP 这 些 Web 程序 语言 之 后 对 session 仍然 一 知 半 解 ,其 实 
session 是 容器 为 访问 者 开辟 的 一 个 内 存 空 间 ,在 通常 情况 下 这 块 内 存 空间 将 为 用 户 保留 30 
分 钟 。 同 一 个 用 户 访问 Web 系统 使 用 的 是 同一 块 内 存 空间 也 即 同一 个 session ,不 同 用 户 
拥有 不 同 的 session。 微 信 小 程序 提供 了 Storage 接口 实现 类 似 Web 开发 中 的 session 的 
机 制 。 

小 程序 提供 了 wx. setStorage ( ) 、wx. getStorage ( ) 、wx. removeStorage ( ) 和 wx 
.clearStorage()4 个 接口 以 实现 Storage 数据 的 设置 .获取 删除 和 清空 操作 。 同 时 ,小 程序 
还 提供 了 wx. setStorageSync ( ) 、wx. getStorageSync ( ) 、 wx. removeStorageSync() 和 wx 
.clearStorageSync()4 个 同步 版 本 接口 。 

wx.setStorage(O 〇 bject object) 将 数据 存储 在 本 地 缓存 指定 的 key 中 ,会 覆盖 原来 该 key 
对 应 的 内 容 。 数 据 存储 生命 周期 跟 小 程序 本 身 一 致 , 即 除 用 户主 动 删除 或 超过 一 定时 间 被 
自动 清理 ,数据 都 一 直 可 用 。 单 个 key 允许 存储 的 最 大 数据 长 度 为 1MB, 所 有 数据 存储 上 
限 为 10MB。wx.setStorage() 属 性 如 表 6.2 所 示 。 


表 6.2 wx.setStorage() 属 性 表 


局 性 类 型 | 必 填 说 明 

key string 是 本 地 缓存 中 指定 的 key 

2 ou 是 需要 存储 的 内 容 。 只 支持 原生 类 型 .Date 及 能 够 通过 JSON. stringify 
序列 化 的 对 象 

Success function 否 | 接口 调用 成 功 的 回调 函数 

fail function 否 | 接口 调用 失败 的 回调 函数 

complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


wx.getStorage(Object object) 从 本 地 缓存 中 异步 获取 指定 key 的 内 容 , 它 的 属性 如 
表 6.3 所 示 。 


表 6.3 wx.getStorage() 属 性 表 


属 性 | 类 型 | 必 填 说 明 

key string 是 本 地 缓存 中 指定 的 key 

success function 否 | 接口 调用 成 功 的 回调 函数 

fail function 否 | 接口 调用 失败 的 回调 函数 

complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 
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[ 贺 6-5 本 例 在 第 一 个 页 面 使 用 wx.setStorage() 接 口 向 数据 缓存 区 
设置 name 和 password 两 个 变量 ,在 第 二 个 页 面 使 用 wx.getStorage() 接 口 
获取 name 和 password 两 个 变量 ,程序 运行 效果 如 图 6.22 所 示 。 i 


视频 讲解 


图 6.22 ”使 用 wx.getStorage() 获 取 缓存 区 数据 


pages/setStorage/setStorage.wxml 的 代码 如 下 : 


< View class = "container" bindtap= 'test'> 
传 数 据 过 去 下 一 页 面 


</view> 
pages/setStorage/setStorage.js 的 代码 如 下 : 


Page({ 
data: { 
password:"123456" 
}, 
test: function() { 
wx. setStorage( { 
key: "name", 
data:" 张 三” 
}) 
wx. setStorage( { 
key: "password", 
data: "123456" 
}) 
Wx. wx. navigateTo( { 
url: '../getStorage/getStorage', 
}) 
} 
}) 


pages/getStorage/getStorage.wxml 的 代码 如 下 : 


<view class = "container log— list"> 
传 过 来 的 数据 是 { {name}} 和 { {password}} 


</view> 
pages/getStorage/getStorage.js 的 代码 如 下 : 


Page({ 
data: { 
name: "", 
password:'， 
}, 
onLoad: function(option) { 
var that = this 
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wx. getStorage({ 
key: 'name'， 
success(res) { 
console. log("wx. setStorage 传 过 来 的 name = " + res. data) 
that. setData({ 
name: res. data 
}) 
} 
}) 
wx. getStorage( { 
key: "password '， 
success(res) { 
console. 1og( "wx. setStorage 传 过 来 的 password=" + res. data) 
that. setData({ 
password: res. data 
}) 
} 
}) 
} 
}) 


贺 6-6 ”wx.setStorage() 和 wx.getStorage() 接 口 有 一 对 同步 接口 wx.setStorageSync() 和 
wx.getStorageSync() ,异步 接口 和 同步 接口 实现 的 功能 是 一 样 的 ,但 是 使 用 方法 却 差别 很 
大 ,本 例 用 数据 缓存 的 同步 接口 改写 例 6-5 ,程序 运行 效果 如 图 6.23 所 示 。 

3 回 


视频 讲解 
图 6.23 ”使 用 wx.getStorageSync() 获 取 缓 存 区 数据 


pages/setStorageSync/setStorageSync.wxml 的 代码 如 下 : 


< View class = "container" bindtap= 'test'> 
传 数据 过 去 下 一 页 面 


</view> 


pages/setStorageSync/setStorageSync.js 的 代码 如 下 : 


test: function() { 
wx. setStorageSync("name"，" 李 四 ") 
nx. setStorageSync ("password", "123456") 
wx. redirectTo( { 
url: '../getStorageSync/getStorageSync', 
}) 
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pages/getStorageSync/getStorageSync.wxml 的 代码 如 下 : 


<view class = "container log— list"> 
传 过 来 的 数据 是 { {name}} 和 { {password}} 


</view> 
pages/getStorageSync/getStorageSync.js 的 代码 如 下 : 


Page({ 
data: { 
name: "" 
password:"" 
}, 
onLoad: function(option) { 
this. setData( { 
name:wx. getStorageSync( "name" ) ， 
password:wx. getStorageSync("password") 
}) 
console. log("setStorageSync 传 过 来 的 name = " + this. data. name) 
console. log("setStorageSync 传 过 来 的 password=" + this. data. password) 
} 
}) 


【代码 讲解 】 认真 对 比例 6-5 和 例 6-6, 同步 接口 wx.setStorageSync()、wx 
.getStorageSync() 和 JSP 里 面 的 session 更 加 相像 ,笔者 推荐 使 用 同步 接口 。 


6.6 html2wxml 富 文本 插件 


6.6.1 html2wxml 插件 介绍 


html2wxml 是 JFinal 学 院 开 发 的 富 文本 插件 , 它 是 微 信 小 程序 Java 版 富 文本 泻 染 解 
决 方案 ,实现 了 HTML 向 WXML 格式 的 转化 ,项 目 基 于 JFinal 十 jsoup 十 FastJSON 开发 ， 
html2wxml 的 实现 功能 如 下 : 

(1) 目前 仅 实现 解析 HTML 并 转换 成 JSON 格式 数据 ,将 生成 的 JSON 通过 接口 访问 
返回 给 微 信 小 程序 端 。 

(2) 微 信 小 程序 端 使 用 html2wxml 组 件 版 ,按照 html2wxml 教程 配置 即 可 。 

(3) HTML 大 部 分 标签 已 经 支持 ,如 Video、Audio 标签 。 

(4) Pre 标签 里 的 代码 支持 代码 着 色 高 亮 显 示 。 


6.6.2 ”html2wxml 插件 使 用 


此 插件 提供 了 后 端的 源码 ,读者 可 以 到 https://gitee.com/909854136/html2wxml4J 
下 载 后 端 Java 源码 ,然后 搭建 到 自己 的 服务 器 或 者 本 地 计算 机 上 ,这 个 搭建 操作 实际 上 是 
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开发 者 自己 用 JFinal 学 院 开 发 的 接口 源码 搭建 自己 的 HTML 转 WXML 的 接口 服务 。 但 
是 因为 搭建 自己 的 接口 服务 过 于 复杂 ,建议 读者 下 载 小 程序 端 插件 ,然后 调用 JFinal 学 院 
对 外 公布 的 调用 接口 ,这 样 就 省 去 了 后 端 接口 的 搭建 环节 。 下 面 介绍 如 何 下 载 和 使 用 
html2wxml 插件 。 

开发 者 需要 到 网 址 https://gitee.com/qwqoffice/html2wxml/tree/master/demo 下 载 
插件 ,插件 实际 上 是 一 个 微 信 小 程序 项 目 。 当 开发 者 把 插件 导入 微 信 开发 者 工具 中 时 ,能 看 到 
如 图 6.24 所 示 的 项 目 结 构 , 项 目 多 了 一 个 html2wxml 文件 夹 。 开 发 者 只 需 把 html2wxml 
文件 夹 复制 到 小 程序 根 目 录 下 即 可 使 用 。 在 新 建 要 使 用 html2wxml 插件 的 页 面 时 需要 按 
照相 应 的 引用 规则 来 编写 。 


+ Q i 


Y 巴 html2wxml 
» 四 highlight-styles 
JS html2wxmljs 
< > html2wxml .wxml 
ws html2wxml.wxss 
v DB pages 
v DD index 
JS indexjs 
{} indexjson 
<> index wxml 
was iNdex WXSS 
3 appjs 
{} appjson 
wms app.wWxss 
{0} project config json 


{} sitemapjson 


图 6.24 html2wxml 插件 项 目 结构 


[ 夯 67 在 index 页 面 中 引入 https://www.qwqoffice.com/html2wxml/ 
example.html 这 个 页 面 , 即 开发 者 把 https://www.qwqoffice.com/html2wxml/ 
example.html 这 个 HTML 页 面 直接 转化 成 微 信 小 程序 的 WXML 页 面 ,而 不 需 
要 自己 写 WXML 页 面 了 。 

pages/index/index.wxml 代码 如 下 : 


Th 
视频 讲解 
< import src="/html2wxml/html2wxml. wxml" /> 


< template is = "html2wxml" data= "{{wxmlData:article}}" /> 


【代码 讲解 】 在 引用 html2wxml 插件 的 时 候 无 须 修 改 index.wxml 文件 中 的 代码 ,只 
需 修改 JS 文件 的 内 容 即 可 。 
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pages/index/index.js 代码 如 下 : 


var html2wxml = 


onLoad: function() { 
wx. request({ 
url: 
success: res =>{ 
wx. request ({ 
url: 'https://www. qnqoffice. com/api/', 
data: { 
text: res. data, 
type: ‘html', 
linenums: true, 
highlight: true 
}, 
method: "POST'"， 


header: { 


require( '../../html2wxml/html2wxm]l. js'); 
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‘https://www. qwqoffice. com/html2wxml/example. html', 


'content - type': ‘application/x— www - form— urlencoded' 


}, 
success: res =>{ 
wx. stopPullDownRefresh!( ); 


html2wxml. html2wxm]( 'article', res.data, this, 5); 


}, 

wxmlTagATap(e) { 
console. log(e); 

}, 

onPullDownRefresh() { 
this. onLoad( ); 

} 

}) 


【代码 讲解 】 代码 url: 'https://www.qwqoffice. 
com/html2wxml/example.html' 是 要 被 转化 的 HTML 
地 址 ,url: 'https://www.qwqoffice.com/api/' 这 条 语句 
是 html2wxml 的 官方 转化 接口 , 即 如 果 想 把 一 个 
HTML 网 址 转 成 WXML 直接 显示 ,只 需要 替换 第 一 个 
url 即 可 。 程 序 运 行 结果 如 图 6.25 所 示 。 

html2wxml 插件 可 以 顺利 地 把 HTML 转化 成 
WXML, 但 是 对 于 JSP 和 PHP 等 动态 网 页 的 转化 还 不 
能 实现 。 有 人 可 能 会 觉得 这 个 插件 作用 不 大 ,但 实际 上 


html2wxml 微 信 小 程序 富 文本 组 件 


用 于 小 程序 的 富 文本 解析 组 件 ， 支 持 HTML 及 Markdo 
wn 格 式 的 转换 ， 支 持 代码 高 亮 


支持 内 联 样式 


支持 class 属 性 


是 带 有 blue 类 的 span 标 签 


PP 


现在 大 量 使 用 的 微 信 公 众 号 网 页 都 是 HTML 页 面 ,使 


图 6.25 ”html 转化 的 效果 
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用 html2wxml 插件 可 以 顺利 地 将 这 些微 信 公 众 号 页 面 转化 成 小 程序 的 WXML 页 面 。 


6.7” 实 训 项 目 一 一 基于 数据 库 的 注册 与 登录 案例 


在 6.3 节 和 6.4 节 通 过 小 程序 与 MySQL 数据 库 的 连接 ,实现 了 新 闻 列 
表 页 和 详情 页 的 功能 ,本 节 继 续 以 注册 和 登录 为 案例 来 熟悉 小 程序 和 后 台 
数据 库 的 交互 。 与 新 闻 列 表 和 详情 页 案例 不 同 的 是 ,注册 的 时 候 还 需要 将 
小 程序 提交 的 数据 插入 后 台 的 MySQL 数据 库 中 。 基 本 的 步骤 还 是 先 建立 
MySQL 的 数据 库 和 表格 ,然后 写 好 Java 的 后 端 JSON 接口 文件 ,再 在 小 程 
序 端 编写 前 端 部 分 。 程 序 执行 效果 如 图 6.26 一 图 6.28 所 示 。 


视频 讲解 


里 户 名 时 户 名 
admin 
码 码 
没有 账户 ? 注册 
(ob ) \ 
二) 
图 6.26 注册 界面 图 6.27 注册 成 功 跳 转 到 登录 页 面 


(1) 创建 数据 库 。 

如 图 6.29 所 示 ,新 建 数据 库 useradmin, 并 设置 字符 集 为 utf8 一 UTF-8 Unicode, 校 对 
编码 为 utf8_general_ci。 单 击 “ 确 定 ” 按 钮 完成 数据 库 的 创建 。 

(2) 创建 表格 。 

创建 user 表格 ,为 了 简单 起 见 ,user 表格 中 仅 设计 最 简单 的 name 和 password 两 个 字 
段 ,字段 的 定义 如 表 6.4 所 示 。 在 表格 创建 完毕 之 后 ,在 user 表格 中 插入 name 取 值 为 
admin,password 取 值 也 为 admin 的 一 行 记录 。 
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| 数据 库 属性 x 
数据 库 名 : 
我 的 评测 useradmin 
我 的 收 瑟 
= 我 的 众 测 了 
[ut generala v 
了 
图 6.28 登录 成 功 跳 转 到 个 人 页 面 图 6.29 新 建 useradmin 数据 库 
表 6.4 user 表 
字 段 类 型 长 度 是 否 为 空 是 否 为 关键 字 
name Varchar 10 否 是 
password Varchar 10 否 否 


(3) 新 建 Servlet 接口 文件 。 
src/request/register.java 的 代码 如 下 : 


package request; 

import java. io. IOException; 

import java. io. PrintWriter; 

import java. sql. Connection; 

import java. sql. DriverManager; 

import java. sql. ResultSet; 

import java. sql. Statement; 

import javax. servlet. ServletException; 

import javax. servlet. annotation. WebServlet; 
import javax. servlet. http. HttpServlet; 

import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import com. mysql. jdbc. PreparedStatement; 
import net. sf. json. JSONArray; 

import net. sf. json. JSONObject; 

/ xx 


# Servlet implementation class register 
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@WebServlet("/register") 
public class register extends HttpServlet { 


private static final long serialVersionUID = 1L; 
/xx 
* @see HttpServlet#HttpServlet() 
*/ 
public register() { 
super(); 
//TODO Auto - generated constructor stub 
} 
/ x# 
x* @see HttpServlet # doGet(HttpServletRequest request, HttpServletResponse response) 
x*/ 
protected void doGet (HttpServletRequest request, HttpServletResponse response) throws 


ServletException, IOException { 


response. setContentType( "text/json; charset = utf — 8"); 
PrintWriter out = response.getWriter(); 
response. setHeader("Rccess - Control - Allow — Origin", "*"); 
response. setHeader( "Access - Control ~ Allow - Methods", "GET, POST"); 
String namel = request. getParameter("name"); 
String passwordl = request. getParameter("password"); 
System, out. println(" 账 号 是 " + namel + "密码 是 " + password1); ”// 验 证 数据 传递 情况 
try { 
Class. forName( "com. mysql. jdbc. Driver" ); 
String url = "jdbc:mysql://localhost/useradmin?user = root&password = 
root&useUnicode = truegcharacterEncoding = UTF — 8"; 
Connection con = DriverManager. getConnection(url); 
String sql = "insert into user(name, password) values(?,?)"; 
PreparedStatement pst = (PreparedStatement) con. prepareStatement(sql); 
pst. setObject(1, namel); 
pst. setObject(2, password1); 
int jieguo = pst.executeUpdate( ); 
JSONArray jsonarray = new JSONArray(); 
JSONObject jsonobj = new JSONObject(); 
jsonobj. put("jieguo", jieguo); 
jsonarray. add( jsonobj); 
out = response. getWriter(); 
out. println(jsonarray); 
pst. close( ); 
con. close(); 
}catch (Exception e) { 
out. print("get data error!"); 
e. printStackTrace( ); } 
} 
/xx 
x* (@see HttpServlet# doPost(HttpServletRequest request, HttpServletResponse response) 
*/ 
protected void doPost (HttpServletRequest request, HttpServletResponse response) throws 


ServletException, IOException { 
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this. doGet (request, response); 
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src/request/login.java 的 代码 如 下 : 


package request; 
import java. io. IOException; 
import java. io. PrintWriter; 
import java. sql. Connection; 
import java. sql. DriverManager; 
import java. sql. ResultSet; 
import java. sql. Statement; 
import javax. servlet. ServletException; 
import javax. servlet. annotation. WebServlet; 
import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import net. sf. json. JSONArray; 
import net. sf. json. JSONObject; 
import com. mysql. jdbc. PreparedStatement; 
/xx 
x Servlet implementation class login 
*/ 
@WebServlet("/login") 
public class login extends HttpServlet { 
private static final long serialVersionUID = 1L; 
/ xx 
* @see HttpServlet#HttpServlet() 
x*/ 
public login() { 
super(); 
//TODO Auto - generated constructor stub 
} 
/xx 
* (@see HttpServlet# doGet(HttpServletRequest request, HttpServletResponse response) 
*/ 
protected void doGet (HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 
response. setContentType( "text/json; charset = utf — 8"); 
PrintWriter out = response. getWriter(); 
response. setHeader("Rccess - Control ~ Allow— Origin", "x*"); 
response. setHeader("Rccess - Control — Allow — Methods", "GET,POST"); 
String namel = request.getParameter("name"); 
String passwordl = request.getParameter("password"); 
System. out. println(" 账 号 是 " + namel + "密码 是 " + password1); // 验 证 数据 传递 情况 
try{ 
Class. forName( "com. mysql. jdbc. Driver"); 
String url = "jdbc:mysql://localhost/useradmin?user = root&password = 
root&useUnicode = true&characterEncoding = UTF — 8"; 
Connection con = DriverManager. getConnection(url); 
Statement stmt = con.createStatement(); 
String sql = "SELECT * FROM user where name='"+namel +"'"+" 
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and password = "+ "'" + passwordl + "'"; 
ResultSet rs = stmt.executeQuery(sql); 
JSONArray jsonarray = new JSONArray(); 
SONObject jsonobj = new JSONObject(); 
while(rs. next()){ 
jsonobj. put ("jieguo",1); 
jsonarray. add( jsonobj); 
} 
out = response. getWriter(); 
out. println(jsonarray); 
stmt. close( ); 
con. close( ); 
}catch (Exception e) { 
out. print("get data error! "); 


e.printStackTrace( ); } 


} 
/xx 


* @see HttpServlet# doPost(HttpServletRequest request, HttpServletResponse response) 
*/ 
protected void doPost (HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 
this. doGet (request, response); 


} 


【代码 讲解 】 register 和 login 两 个 Servlet 和 6.4 节 中 的 新 闻 列 表 页 ,详情 页 的 Servlet 
的 代码 差不多 ,区 别 在 于 注册 的 时 候 需 要 从 小 程序 端 把 账号 和 密码 传递 到 Servlet 中 ,在 
register 这 个 Servlet 中 需要 增加 接收 数据 的 代码 。 


String namel = request. getParameter("name"); 
String passwordl = request.getParameter("password"); 


上 面 两 行 语句 是 接收 小 程序 传递 过 来 的 数据 。 另 外 ,注册 时 需要 将 数据 插入 数据 库 中 ， 
所 以 使 用 了 语句 : 


String sql = "insert into user(name, password) values(?,?)"; 


如 果 对 相关 代码 不 清楚 ,可 以 参考 JSP 程序 设计 的 知识 。 
(4) 小 程序 部 分 。 
pages/register/register.wxml 的 代码 如 下 : 


< view class = "zong"> 
< form report— submit bindsubmit = 'dian'> 
<view class = "1ogin - item"> 
<view class = "login - item- info"> 用 户 名 </view> 
<view>< input name = "name" /></view> 
</view> 
< view class = "login - item"> 
<view class = "login - item - info"> 密 码 </view> 
<view class= "login - pwd"> 
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< input style= "flex— grow:1" password = "true"” name = "password"/> 
</view> 
</view> 
< view class = "1ogin - item bottom"> 
<button class = "1ogin - btn" form - type = 'submit'> 注 册 </button > 
</view> 
</form> 
<view class = " item bottom— info"> 
<view class = "wechat ~ icon"> 
< image src = "/image/wechat.png"” /> 
</view> 
</view> 
</view> 


pages/register/register.js 的 代码 如 下 : 


var app = getApp(); 
Page({ 
data: { 
username: null, 
password: null, 
jieguo:null 
}, 
dian: function(e) { 
var that = this; 
that. username = e. detail. value. name; 
that. password = e. detail.value. password; 
console. log(that. username); 
wx. request({ 
url: 'http://localhost:8080/mini/register', 
data: { 
name: that. username, 
password: that. password 
二 
header: { 
'content ~ type': 'application/json' // 默 认 值 
}, 
success: function(res) { 
console. log(res. data[ 0]); 
console. log(res. data[ 0]. jieguo); 
that. jieguo = res.data[0].jieguo; 
if (that. jieguo == 1) { wx.redirectTo({ url: "../login/login" }) } 
}, 
fail: function(res) { 
console. log("..... | RR 
} 
}) 
}, 
usernameInput: function(event) { 
console. log(event. detail. value); 
this. setData({ username: event. detail. value }) 
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}, 


passwordInput: function(event) { 


this. setData({ password: event. detail. value }) 
4 
}) 


pages/register/register.wxss 的 代码 如 下 : 


.mcontainer { 
height: 100 %; display: flex; 
flex— direction: column; align ~ items: center; 
justify— content: space— between; 
} 
.item{ 
flex— grow:1; height: 30 %; 
Overflow: hidden; display: flex; 
justify ~ content: center; 
align— items: center; 
flex— direction: column; 
width: 96 %; padding: 0 2 %; 
} 
.login— item{ 
width: 90 %; margin 一 top: 30rpx; 
border - bottom: 1px solid # eee; 
flex— grow:1; display: flex; 
flex— direction: column; 
justify- content: flex— end; 
padding - bottom: 20rpx; 
} 
.bottom{ 
border - bottom: Opx; 
} 
.login— item— infof 
font ~ size: 16px; color: #888; 
padding — bottom: 20rpx; 


.login— pwd{ 
display: flex; flex— grow: 1; 
justify— content: space - between; 
align— items: center; 


.login— pwd text{ 
height: 100 %; font— size: 14px; 
color: #888; display: flex; 


.login— btnf 

width: 80 %; color: white; 
background — color: green; 

border — radius: 0; font— size: 14px; 


.login - btn:hover{ 
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width: 80 %; color: white; 
border - radius: 0; 
} 
.bottom — info{ 
} 
. Wechat — icon{ 
margin - top: 30px; width: 30px; 
height: 30px; 
border: 1px solid seagreen; 
border - radius: 50 %; padding: 10px; 
} 
. Wechat — icon imagef 
width: 30px; height: 30px; 
} 


【代码 讲解 】 在 register.wxml 中 需要 将 数据 提交 到 JS 文件 中 ,此 时 < form > 标签 必须 
写 report-submit 属性 ,并 且 < button > 标签 的 form-type 需要 设置 为 submit, 故 有 以 下 两 行 
代码 : 


<form report— submit bindsubmit = 'dian'> 
< button class = "login - btn" form— type = 'submit'> 注 册 </button > 


register.wxml 文件 提交 数据 之 后 ,register.js 通过 以 下 两 行 代码 : 


that. username = e. detail. value. name; 
that. password = e. detail. value. password; 


来 接收 register.wxml 的 数据 ,再 通过 wx.request() 中 的 data 对 象 传递 给 后 端的 Servlet 文 
件 。Servlet 处 理 完 之 后 的 结果 又 封装 在 wx.request() 方 法 的 res.data 的 数组 里 面 ,因为 是 
插入 操作 ,结果 只 以 “0? 或 者 “1 标识 ,所 以 数组 只 有 一 个 元 素 , 即 数据 在 res.dataL0] 中 。 当 
返回 的 jieguo 王 =“1? 说 明 注 册 成 功 , 则 通过 wx.redirectTo({ url:"./login/login”)) 跳 转 
到 login 页 面 。 

pages/login/login.wxml 的 代码 如 下 : 


< View class = "zong"> 
< form report - submit bindsubmit = "dian'> 
< View class = "1ogin - item"> 
<view class = "login - item - info"> 用 户 名 </view> 
<view>< input name = "name”/></view> 
</view> 
< View class = "login - 让 em"> 
<view class = "login - item- info"> 密 码 </view > 
<view class = "login - pwd"> 
< input style= "flex- grow:1" password = "true"” name = "password"/> 
</view> 
</view> 
< View class = "login - 让 em bottom"> 
<button class = "login - btn" form— type = 'submit'> 登 录 </button > 
</view> 
</form> 
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<view class = "item bottom— info"> 
<view> 没有 账户 ? < text > 注册 </text > </view> 
<view class = "wechat — icon"> 
< image src = "/image/wechat. png" /> 
</view> 
</view> 
</view> 


pages/login/login.js 的 代码 如 下 : 


var app = getApp(); 
Page({ 
data: { 
username: null, 
password: null, 
jieguo: null 
}, 
dian: function(e) { 
var that = this; 
that. username = e.detail.value.name; 
that. password = e. detail.value.password; 
console. log(that. username); 
wx. request({ 
url: 'http://localhost:8080/mini/login’, 
data: { 
name: that. username, 
password: that. password 
}, 
header: { 
'content - type': 'application/json' // 默 认 值 
}, 
success: function(res) { 
console. log(res. data[ 0]); 
console. log(res. data[ 0]. jieguo); 
that. jieguo = res.data[0].jieguo; 
if (that. jieguo == 1) { 
wx. setStorageSync ("username", that.username) 
wx. redirectTo({ url: "../user/user" }) } 
}, 
fail: function(res) { 
console. log("..... EE rs 
} 
}) 
}, 
usernameInput: function(event) { 
console. log(event. detail. value); 
this. setData({ username: event. detail. value }) 
}, 
passwordInput: function(event) { 
this. setData( { password: event. detail. value }) 
} 
}) 
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pages/login/login.wxss 的 代码 如 下 : 


.mcontainer { 
height: 100 %; display: flex; 
flex- direction: column; 
align ~ items: center; 
justify ~ content: space— between; 
} 
.item{ 
flex— grow:1; height: 30 %; 
overflow: hidden; display: flex; 
justify- content: center; 
align ~ items: center; 
flex— direction: column; 
width: 96 %; padding: 0 2%; 
} 
.login— item{ 
width: 90 %; 
margin 一 top: 30rpx; 
border - bottom: 1px solid # eee; 
flex— grow:1; display: flex; 
flex— direction: column; 
justify- content: flex— end; 
padding - bottom: 20rpx; 
} 
.bottom{ 
border - bottom: Opx; 
} 
.login— item— infof 
font ~ size: 16px; color: #888; 
padding — bottom: 20rpx; 


.login— pwd{ 

display: flex; flex— grow: 1; 
justify ~ content: space - between; 
align— items: center; 


.login - pwd text{ 
height: 100 %; font 一 size: 14px; 
color: #888; display: flex; 


.login— btn{ 
width: 80 %; color: white; 
background — color: green; 


border - radius: 0; font— size: 14px; 


.login— btn:hover{ 
width: 80%; color: white; 
border - radius: 0; 


. bottom — infof 
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} 


.wechat — icon{ 


margin - top: 30px; width: 30px; 
height: 30px; 
border: 1px solid seagreen; 
border - radius: 50 %; padding: 10px; 
} 
.wechat — icon imagef 
width: 30px; height: 30px; 
} 


【代码 讲解 】 后 端的 Servlet 代码 中 ,while(rs.next()) 说 明 存 在 账号 和 密码 都 正确 的 
记录 ;“jsonobj.put("jieguo" ,1);” 语 句 传 回 jieguo 二 1 给 小 程序 前 端 ; wx.redirectTo({ url: 
"./user/user”})) 跳 转 到 登录 成 功 的 user 页 面 。 

pages/user/user.wxml 的 代码 如 下 : 


< view class = "index - container"> 
<image src="/image/user. jpg" ></image> 
<view class = "nickname"> 
{{username}} 
</view> 
</view> 


pages/user/user.js 的 代码 如 下 : 


var app = getApp(); 
Page({ 
data:{ 
username:null 
}, 
onLoad: function(options){ 
console. log( (wx. getStorageSync("username") ) ) ; 
this. setData({ 
username: wx. getStorageSync( "username") 
}) 
} 
}) 


pages/user/user.wxss 的 代码 如 下 : 


. index — container{ 
width: 100 %; 
height: 100 %; 
position: relative; 

} 

. index — container image{ 
width: 100 %; 
height: 550px; 

} 

.nickname{ 


position: absolute; 
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top: 170px; 
left: 120px; 
font — size: 25px; 
} 
【代码 讲解 】 user.js 页 面 通过 wx.getStorageSync("username") 获 取 上 一 个 页 面 login 
设置 的 username 数据 ,并 通过 数据 绑 定 的 方式 在 user.wxml 中 显示 。 


243 


网 络 通信 与 文件 上 传 下 载 操作 


微 信 小 程序 常见 的 网 络 应 用 有 HTTPS 请 求 wx. request、WebSocket 通信 wx 
.connectSocket、 上 传 文件 wx.uploadFile 和 下 载 文 件 wx.downloadFile, 其 中 第 6 章 的 数据 
库 操作 部 分 已 经 对 wx. request 的 用 法 进行 了 讲解 ,本 章 将 对 余下 的 三 组 网 络 应 用 进行 
讲解 。 

本 章 主要 目标 

。 了 解 微 信 小 程序 网 络 通信 的 应 用 场景 ; 

。 了解 小 程序 WebSocket 的 通信 机 制 和 常用 接口 ; 

。 熟练 掌握 微 信 小 程序 文件 上 传 和 下 载 操 作 ; 

。 通过 网 络 相册 实 训 项 目 加 深 对 文件 上 传 下 载 操 作 的 理解 与 运用 。 


7.1 WebSocket 


随 着 互联 网 的 发 展 ,传统 的 HTTP 协议 已 经 很 难 满足 Web 应 用 日 益 复 杂 的 需求 了 。 
近年 来 , 随 着 HTML5 的 诞生 ,WebSocket 协议 被 提出 , 它 实现 了 浏览 器 与 服务 器 的 全 双 工 
通信 ,扩展 了 浏览 器 与 服务 端的 通信 功能 ,使 服务 端 也 能 主动 向 客户 端 发 送 数据 。 

传统 的 HTTP 协议 是 无 状态 的 ,每 次 请 求 (Request) 都 要 由 客户 端 (如 浏览 器 ) 主动 发 
起 ,服务 端 进行 处 理 后 返回 Response 结果 。 传 统 Web 模式 中 客户 端 是 主动 方 , 服 务 端 是 被 
动 方 ,服务 端 很 难 主动 向 客户 端 发 送 数据 ,对 于 信息 变化 不 频繁 的 Web 应 用 来 说 传统 模式 
是 足够 应 付 的 。 对 于 涉及 实时 信息 交互 的 Web 应 用 ,如 带 有 即时 通信 、 实 时 数据 .订阅 推送 
等 功能 的 应 用 ,上 述 模式 带 来 了 很 大 的 不 便 。 在 WebSocket 规范 被 提出 之 前 ,开发 人 员 若 
要 实现 这 些 实时 性 较 强 的 功能 ,经 常会 使 用 折 中 的 解决 方法 : 轮 询 (Polling) 和 Comet 技 
术 。 后 者 本 质 上 其 实 也 是 一 种 轮 询 , 但 有 所 改进 。 

轮 询 是 最 原始 实现 实时 Web 应 用 的 解决 方案 。 轮 询 技术 要 求 客户 端 以 设 定 的 时 间 间 
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隔 周期 性 地 向 服务 端 发 送 请 求 ,频繁 地 查询 是 否 有 新 的 数据 改动 。 明 显 地 ,这 种 方法 会 导致 
过 多 不 必要 的 请 求 ,浪费 流量 和 服务 器 资源 。 

Comet 技术 可 以 分 为 长 轮 询 和 流 技术 。 长 轮 询 改 进 了 上 述 的 轮 询 技术 ,减少 了 无 用 的 
请 求 。 它 为 某 些 数据 设 定 过 期 时 间 , 当 数据 过 期 后 才 会 向 服务 端 发 送 请 求 ,这 种 机 制 适合 数 
据 改动 不 是 特别 频繁 的 情况 。 流 技术 通常 是 指 客户 端 使 用 一 个 隐藏 的 窗口 与 服务 端 建立 一 
个 HTTP 长 连接 ,服务 端 会 不 断 更 新 连接 状态 以 保持 HTTP 长 连接 存活 , 据 此 ,服务 端 就 
可 以 通过 这 条 长 连接 主动 将 数据 发 送 给 客户 端 。 

轮 询 和 Comet 技术 都 基于 请 求 -应 答 模式 ,都 不 算是 真正 意义 上 的 实时 技术 。 它 们 的 
每 一 次 请 求 .应答 ,在 相同 的 头 部 信息 上 都 浪费 了 一 定 流量 ,并 且 复 杂 度 也 较 大 。 

伴随 着 HTML5 推出 的 WebSocket ,真正 实现 了 Web 的 实时 通信 ,使 B/S 模式 具备 了 
C/S 模式 的 实时 通信 能 力 。WebSocket 的 工作 流程 是 这 样 的 : 浏览 器 通过 JavaScript 向 服 
务 端 发 出 建立 WebSocket 连接 的 请 求 , 在 WebSocket 连接 建立 成 功 后 ,客户 端 和 服务 端 就 
可 以 通过 TCP 连接 传输 数据 。 因 为 WebSocket 连接 本 质 上 是 TCP 连接 ,所 以 不 需要 每 次 
传输 都 带 上 重复 的 头 部 数据 , 它 的 数据 传输 量 比 轮 询 和 Comet 技术 小 很 多 。 


7.1.1 WebSocket 接口 


微 信 小 程序 的 WebSocket 功能 提供 了 wx.connectSocket()、wx.onSocketOpen()、wx 
.OnSocketError()、wx.sendSocketMessage()、wx.onSocketMessage()、wx.closeSocket() 和 
wx.onSocketClose() 接 口 , 具 体 功能 如 表 7.1 所 示 。 


表 7.1 WebSocket 常用 函数 


接 口 功能 和 用 途 
wx.connectSocket() 创建 WebSocket 连接 
wx.onSocketOpen() 监听 WebSocket 打开 
wx.onSocketError() 监听 WebSocket 错误 
wx.sendSocketMessage() 发 送 WebSocket 消息 
wx.onSocketMessage() 接收 WebSocket 消息 
wx.closeSocket() 关闭 WebSocket 连接 
wx.onSocketClose() 监听 WebSocket 关闭 


因为 篇 幅 的 问题 ,本 书 只 对 其 中 主要 的 接口 做 说 明 , 其 他 接口 可 以 参考 小 程序 官方 
文档 。 

1. wx.connectSocket(OBJECT) 

基础 库 1.7.0 之 前 ,一 个 微 信 小 程序 在 同一 时 刻 只 能 创建 一 个 WebSocket 连接 ; 如 果 
当前 已 存在 一 个 WebSocket 连接 ,会 自动 关闭 该 连接 ,并 重新 创建 一 个 WebSocket 连接 。 
基础 库 1.7.0 及 以 后 , 微 信 小 程序 支持 存在 多 个 WebSocket 连接 ,每 次 成 功 调用 wx 
.connectSocket() 都 会 返回 一 个 新 的 SocketTask。wx. connectSocket ( ) 接口 的 属性 如 
表 7.2 所 示 。 
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表 7.2 wx.connectSocket() 属 性 表 


参 数 = 型 | 必 填 说 明 
本 Sedank 是 开发 者 服务 器 接口 地 址 ,必须 是 wss 或 者 ws 协议 , 且 域 名 必须 是 
后 台 配置 的 合法 域名 
header Object 否 HTTP Header，header 中 不 能 设置 Referer 
protocols StringArray 否 | 子 协议 数组 
success Function 否 | 接口 调用 成 功 的 回调 函数 
fail Function 否 | 接口 调用 失败 的 回调 函数 
complete Function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 
示例 代码 : 


wx. connectSocket({ 
url: 'wss://example. qq. com', 
data:{ 
A 
Y:"" 
}, 
header:{ 
'content - type': 'application/json' 
}, 
protocols: ['protocol1'], 
method: "GET" 
}) 


从 示例 代码 中 可 以 发 现 wx.connectSocket() 接 口 和 wx.request() 接 口 很 类 似 ,重点 需 
要 注意 的 是 接口 地 址 url 不 能 写 HTTP 或 者 HTTPS 协议 ,而 应 写 WS 和 WSS 协议 ,这 是 


WebSocket 规范 要 求 的 。 
2. wx.sendSocketMessage( OBJECT) 


通过 WebSocket 连接 发 送 数 据 , 需 要 先 调用 wx. connectSocket () 接口 ,并 在 wx 


.onSocketOpen() 回 调 之 后 才能 发 送 。wx.sendSocketMessage() 接 口 的 属性 如 表 7.3 所 示 。 


表 7.3 wx.sendSocketMessage() 属 性 表 


参 数 类 型 必 填 说 明 

data String| ArrayBuffer 是 需要 发 送 的 内 容 

Success Function 否 接口 调用 成 功 的 回调 函数 

fail Function 否 接口 调用 失败 的 回调 函数 

complete Function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 
示例 代码 : 


Var socketOpen = false 
var socketMsgQueue = [] 
wx. connectSocket({ 

url: 'test. php' 
}) 


wx. onSocketOpen( function(res) { 
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socketOpen = true 
for (var i = 0; i< socketMsgQueue. length; i++){ 
sendSocketMessage( socketMsgQueue[ i]) 


} 
socketMsgQueue = [] 
}) 


function sendSocketMessage(msg) { 
if (socketOpen) { 
Wx. sendSocketMessage( { 
data:msg 
}) 
} else{ 
socketMsgQueue. push( msg) 
} 

} 

一 般 来 说 , 开发 WebSocket 项 目 通 过 WXML 文件 的 点 击 事 件 来 调用 wx 
.sendSocketMessage() ,如 代码 中 的 sendSocketMessage(msg) 就 是 对 wx. sendSocketMessage() 
的 调用 。 从 示例 代码 中 可 以 看 出 ,要 使 用 wx.sendSocketMessage() 接 口 ,应 该 先 使 用 wx 
.connectSocket() 和 wx.onSocketOpen() 两 个 接口 。 

3. wx.onSocketMessage(CALLBACK) 

wx.onSocketMessage() 接 口 用 来 监听 WebSocket 从 服务 器 接收 到 的 消息 事件 。wx 
.onSocketMessage() 接 口 的 属性 如 表 7.4 所 示 。 


表 7.4 wx.onSocketMessage() 属 性 表 
参 数 类 型 说 明 


data String| ArrayBuffer 服务 器 返回 的 消息 


示例 代码 : 


wx. connectSocket ({ 
url: "test. php' 
}) 
wx. onSocketMessage( function(res) { 
console. 1og( ' 收 到 服务 器 内 容 : ' + res. data) 
}) 


7.1.2 基于 Node.js 的 WebSocket 案例 


WebSocket 需要 有 后 台 程序 的 配合 ,而 后 台 程 序 既 可 以 采用 Tomcat 下 的 Java 程序 ， 
也 可 以 采用 Node.js 程序 ,本 例 中 采用 后 者 作为 WebSocket 的 后 台 程 序 。 简 单 地 说 ,Node 
.js 就 是 运行 在 服务 器 端的 JavaScript。Node.js 是 一 个 基于 Chrome JavaScript 运行 时 建立 
的 平台 ,是 一 个 事件 驱动 /O 服务 端 JavaScript 环境 , 它 基 于 Google 的 V8 引擎 ,因为 V8 
引擎 执行 JavaScript 的 速度 非常 快 , 所 以 性 能 非常 好 。 

Node.js 的 安装 配置 过 程 可 以 在 网 络 中 搜索 到 。 本 书 附带 的 代码 包 中 也 提供 了 一 个 
Node.js 的 WebSocket 后 台 的 demo, 在 开发 WebSocket 小 程序 的 时 候 , 开 发 者 需要 开启 这 
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个 Node.js 的 WebSocket 后 台 程序 ,启动 成 功 之 后 的 界面 如 图 7.1 所 示 。 


这 台电 脑 》 软 件 盘 (D:) 〉 server 


名 称 


丽 CWWINDOWS\system32\cmd.exe - node serverjs 


node_modules 
packagejson 
中 serverjs 
加 startServer.bat 


图 7.1 基于 Node.js 的 WebSocket 后 台 程序 


7-1 WebSocket 实际 上 是 一 个 多 方 通信 接口 , 当 小 程序 部 署 到 服 
务 器 上 的 时 候 , WebSocket 允许 多 个 手机 访问 后 台 服 务 器 来 建立 通信 。 为 
了 在 一 台 计 算 机 上 演示 通信 过 程 ,本 例 采用 一 个 小 程序 和 一 个 HTML 页 面 
来 建立 通信 ,具体 效果 如 图 7.2 和 图 7.3 所 示 。 其 中 ,图 7.2 是 小 程序 ， 
图 7.3 是 360 浏览 器 ,它们 访问 同一 个 Node.js 后 端 服务 来 建立 连接 。 


18:15:35 欢迎 我 是 html 进 来 阴 天 ! wm ee 


18:15:47 欢迎 我 是 小 程序 进来 聊天 ! 


你 好 啊 htm 


虞 是 html 18:16:5 or 
你 好 啊 小 程序 et 
我 是 小 和 何人 

我 收 到 你 的 信息 了 | 人 让 了 

熙 是 html 18:16:42 我 电 收 到 你 3 信 中 了 时 


贱 也 收 到 你 的 信息 了 嘿嘿 


我 收 到 你 的 信息 了 


图 7.2 小 程序 和 HTML 建立 连接 的 小 程 图 7.3 小 程序 和 HTML 建立 连接 的 HTML 端 
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pages/ websocket /websocket.wxml 的 代码 如 下 : 


< view class = "zong"> 
<view class = "shang"> 
< view wx:for = "{{messagelist}}" wx:for— index = "idx" wx:for - item= "itemName"> 
<view class = "selfMessage" wx:if = "{{itemName. type == 'self'}}"> 
<view class = "nameInfo">{{itemName. name + " " + itemName.time}}</view> 
<view class = "detailMessage">{ {itenName. message} }</view > 
</view> 
< View class = "otherMessage”wx:else> 
< view class = "nameInfo">{{itemName. name + " " + itemName.time}}</view> 
<view class = "detailMessage">{ {itemName. message} }</view> 
</view> 
</view> 
</view> 
< view class = "xia"> 
< form report - submit bindsubmit = "fasong"> 
< View class = "inputArea"> 
< input type = "text” name = "inputValue" placeholder = "{{placeholderText}}" 
class = "message"/></view> 
<button size = "default" type = "primary”form 一 type = "submit" 
class = "sendButton"> 发 送 </button > 
</form> 
</view> 
</view> 


pages/websocket/websocket.js 的 代码 如 下 : 


Page({ 
data: { 
PlaceholderText : "连接 后 端 服务 器 中 ……"， 
messagelist: [], 
socketOpen: false, 
}, 
onLoad: function(options) { 
var that = this; 
console. log(" 将 要 连接 后 端 服 务 器 。"); 
wx. connectSocket ({ 
url: ‘ws://localhost:8081' 
D); 
wx. onSocketOpen( function(res) { 
console. 1og( "连接 后 台 服 务 器 成 功 。"); 
that. setData( { 
placeholderText: "连接 成 功 ,请 输入 您 的 昵称 。"， 
socketOpen: true 
]) 
]) 
wx. onSocketMessage(function(res) { 
console. 1og( ' 收 到 后 端 服 务 器 内 容 : ' + res. data); 
var data = res. data; 
var dataArray = data. split(" "); 
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Var newMessage = { 
type: dataArray[0], 
name: dataArray[1], 
time: dataArray[2], 
message: dataArray[3] 
}; 
var newArray = that.data. messagelist. concat(newMessage); 
that. setDatal( { 
messagelist: newArray, 
placeholderText: "请 输入 聊天 信息 " 
]) 7 
]) 
}, 
onUnload: function() { 
wx. closeSocket( ); 
}, 
fasong: function(e) { 
var that = this 
if (e. detail. value. inputValue != "") { 
if (this. data. socketOpen) { 
Wx. sendSocketMessage( { 


data: e. detail. value. inputValue 


【代码 讲解 】 WebSocket.wxml 文件 通过 < form report-submit bindsubmit 一 "fasong"> 传 
递 数据 给 JS 文件 ,JS 文件 通过 点 击 函 数 fasong: function(e) 接 收 前 台 输 入 的 数据 .detail. 
value.inputValue, 然 后 把 e.detail. value.inputValue 数据 存 到 wx.sendSocketMessage() 的 data 
参数 中 ,再 发 送 到 后 台 的 服务 器 端 。wx.onSocketMessage( ) 接 口 接收 数据 ,接收 到 的 数据 
可 以 是 自己 (聊天 时 候 的 自己 ) 刚 才 发 出 去 的 ,也 可 以 是 别 的 客户 端 ( 聊 天 的 对 方 ) 发 给 服 
务 器 端的 ,所 有 的 数据 全 部 在 res. data 中 。 通 过 console.log(' 收 到 服务 器 内 容 : 
' 十 res.data) 来 打印 res.data 的 数据 如 图 7.4 所 示 。 


图 7.4 ”Console 中 打印 显示 res.data 内 容 


图 7.4 在 Console 控制 台 打 印 显示 了 wx.onSocketMessage() 接 口 实时 监控 到 的 数据 ， 
接收 到 一 条 信息 就 自动 更 新 res. data 数据 ,再 通过 self. data. messageArray. concat 
(newMessage) 将 每 一 个 res. data 数据 连接 起 来 形成 数据 数组 messageArray, 然后 在 


| 250 


第 7 章 ”网 络 通信 与 文件 上 传 下 载 操作 07 


WXML 通过 for 循环 的 方式 遍历 显示 出 来 。 


7.2 wx.uploadFile() 文 件 上 传 


wx.uploadFileCOBJECT) 接 口 将 本 地 资源 上 传 到 开发 者 的 服务 器 上 ,客户 端 发 起 一 个 
HTTPS 的 Post 请 求 ,其 中 content-type 为 multipart/form-data。 在 上 传 之 前 需要 先 获取 
本 地 (手机 ) 上 的 资源 ,即使 用 wx.uploadFile(OBJECT) 之 前 应 该 先 调 用 其 他 的 接口 来 获 
取 待 上 传 的 文件 资源 ,例如 先 调 用 wx.chooseImage( ) 接 口 来 获取 到 本 地 图 片 资源 的 临时 
文件 路 径 , 再 通过 wx. uploadFile (OBJECT) 接 口 将 本 地 资源 上 传 到 指定 服务 器 。 
wx.uploadFile() 接 口 属性 如 表 7.5 所 示 。 


表 7.5 wx.uploadFile(Object object) 属 性 表 


属性 | 类 型 | 必 填 说 上 明 
url string 是 | 开发 者 服务 器 地 址 
filePath | string 是 | 要 上 传 文件 资源 的 路 径 
name String 是 | 文件 对 应 的 key, 开 发 者 在 服务 器 端 可 以 通过 这 个 key 获取 文件 的 二 进 制 内 容 
header Object 否 | HTTP 请 求 Header, Header 中 不 能 设置 Referer 
formData | Object 否 | HTTP 请 求 中 其 他 额外 的 form data 
success |function | 否 | 接口 调用 成 功 的 回调 函数 
fail function | 否 | 接口 调用 失败 的 回调 函数 
complete | function | 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


示例 代码 : 


Wx. chooseImage( { 
success(res) { 
const tempFilePaths = res.tempFilePaths 
wx. uploadFile( { 
url: 'https://example. weixin. qq. com/upload', // 仅 为 示例 , 非 真实 的 接口 地 址 
filePath: tempFilePaths[0], 
name: 'file', 
formData: { 
user: 'test' 
}, 
success(res) { 
const data = res.data 


//do something 
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第 6 章 中 wx.request() 从 服务 器 上 获取 数据 库 的 内 容 , 服 务 器 端 需 准备 好 读 取 MySQL 
数据 库 并 形成 小 程序 需要 的 JSON 格式 数据 的 接口 。wx.uploadFile(OBJECT) 接 口 实现 小 
程序 上 传 文件 到 服务 器 上 ,服务 器 端 也 应 该 有 对 应 的 接口 来 接收 文件 ,本 节 采 用 Struts 搭 
建 一 个 后 端的 服务 接口 。Struts2 是 一 个 基于 MVC 设计 模式 的 Web 应 用 框架 , 它 本 质 上 
相当 于 第 5 章 的 后 端 Servlet 程序 。 在 MVC 设计 模式 中 ,Struts2 作为 控制 器 (Controller) 
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文件 上 传 后 端 


来 建立 模型 与 视图 的 数据 交互 。 对 于 不 熟悉 Struts 的 读者 ,可 以 查看 Struts 相关 书籍 。 


[ 圆 ?7-? 文件 上 传 操作 的 后 端 接口 。 图 7.5 是 本 例 后 端 项 目的 项 目 结构 图 ,程序 运行 


效果 如 图 7.6 所 示 。 


色 


;外 


[更 upload 
， 主 Deployment Descriptor upload 
» ®® Deployed Resources 
» Bh JavaScript Resources 
~ 中 src 
， 凯 fileUpDown 
globalMessages_ en_US.properties 
globalMessages_zh_CN.properties 
0 strutsxml 
Bh JRE System Library [jdk17] 
» Bh Apache Tomcat v8.0 [Apache Tomcat v8.0]| 
» BB Web App Libraries 
> BB JSTL 1.2.1 Library 
v 镶 WebRoot 
» META-INF 文件 上 传 
» WEB-INF 
BW fileDown.jsp 选择 文件 | 垃圾 邮件 2 jpg 上 传 
外 fileupjsp 
BD fileUpSuccessjsp 


离 收 藏 - 重 手 机 收藏 夫 oO 调研 宝 加 大 学 城 


7.0.0.1:8080/upload/fileUp.jsp 


仆 程序 开 


图 7.5 文件 上 传 后 端 项 目 结构 图 图 7.6 文件 上 传 后 端 项 目 运行 效果 图 


src/struts.xml 的 代码 如 下 : 


<!DOCTYPE struts PUBLIC 
"—//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
"http://struts. apache. org/dtds/struts — 2.0. dtd"> 
<struts> 
<! -- Configuration for the default package. -—> 


< constant name = "struts. custom. il8n. resources" value = "globalMessages" /> 


< constant name = "struts. il8n. encoding" value= "utf -8" /> 
< constant name = "struts. multipart. saveDir" value = "/tmp"/> 
< package name = "I18N" extends = "struts - default"> 
< action name = "upLoad" class = "fileUpDown. UploadAction"> 
< interceptor - ref name = "fileUpload"> 


<! -- 允许 的 MIME 类 型 --> 


< param name = "allowedTypes"> image/bmp, image/png, image 


/gif, image/jpeg </param > 
<! -- 允许 上 传 文件 的 最 大 尺寸 -一 > 
< param name = "maximumSize"> 1024000 </param > 
</interceptor - ref > 
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<! -- 一 定 要 写 在 后 面 
< interceptor - ref name = "defaultStack"></interceptor - ref > 
<result name = "input">/fileUp. jsp </result> 

< result name = "success">/fileUpSuccess. jsp </result> 


一 > 


</action> 
</package > 
</struts> 


src/fileUpDown/UploadAction.java 的 代码 如 下 : 


package fileUpDown; 
import com. opensymphony. xwork2. ActionSupport; 
import java. io. File; 
import java. io. FileInputStream; 
import java. io. FileOQutputStream; 
import java. io. IOException; 
import org. apache. commons. io. FileUtils; 
import org. apache. struts2. ServletActionContext; 
public class UploadAction extends ActionSupport{ 
private File file; 
private String fileContentType; 
private String fileFileName; 
public File getFile() { 
return file; 
} 
public void setFile(File file) { 
this. file = file; 
} 
public String getFileContentType() { 
return fileContentType; 
} 
public void setFileContentType( String fileContentType) { 
this. fileContentType = fileContentType; 
} 
public String getFileFileName() { 
return fileFileName; 
} 
public void setFileFileName(String fileFileName) { 
this. fileFileName = fileFileName; 
} 
public String execute() throws Exception { 
// 得 到 上 传 文件 在 服务 器 的 路 径 加 文件 名 
String target = ServletActionContext. getServletContext( ) . getRealPath 
("/upload/" + fileFileName); 
// 获 得 上 传 的 文件 
File targetFile = new File(target); 
// 通 过 struts2 提供 的 FileUtils 类 复制 
try{ 
FileUtils. copyFile(file, targetFile); 
} catch (IOException e) { 
e. printStackTrace( ); 
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} 
return SUCCESS; 


} 


} 


【代码 讲解 】 在 Struts.xml 文件 中 引用 了 Struts 自 带 的 fileUpload 拦截 器 ,对 上 传 文 
件 进 行 了 限制 ,< param name 王 "allowedTypes"> 设 置 了 只 能 上 传 图 片 格式 文件 , < param 
name 一 "maximumSize"> 1024000 </param > 设置 了 上 传 文件 的 大 小 ,不 满足 条 件 的 上 传 操 
作 将 失败 。 因 为 Struts 做 了 很 多 的 功能 封装 , “UploadAction.java FileUtils.copyFile(file， 
targetFile); ”实现 了 把 上 传 文件 复制 一 份 到 指定 的 目录 下 的 功能 。 

项 目 中 有 几 个 JSP 文件 是 可 以 在 PC 端 实现 上 传 功能 的 ,本 例 只 讲解 使 用 小 程序 作为 
客户 端 来 上 传 文件 。 读 者 可 以 下 载 本 书 附带 的 此 例 源 代码 ,以 后 用 到 文件 上 传 功能 就 可 以 
直接 使 用 此 项 目 作 为 后 端 接口 。 


7.2.2 文件 上 传 前 端 


贺 7-3 本 例 在 例 7-2 的 基础 上 进行 前 端 小 程序 的 编写 ,小 程序 端 调 用 
wx.uploadFile() 接 口 选择 手机 上 的 图 片 ,然后 上 传 到 服务 器 上 。 小 程序 端 运 行 效果 
如 图 7.7 所 示 , 服 务 器 接收 到 的 图 片 如 图 7.8 所 示 。 


xiangce > upload Y 口 搜 索 "upload" | 
wx81a9d7bbad wx81a9d7bbad wx81a9d7bbad 
e2ee1b.o6zAjs e2ee1b.o6zAJs e2ee1b.o6zAjs 
Ou1ZvGgiTZDUs Ou1ZvGgiTZDUs Ou1ZvGgiTZDUs 
h_wcmvSQg.b... h_wcmvSQg.K... h_wcmvSQg.p... 
匡 
wx81a9d7bbad wx81a9d7bbad wx81a9d7bbad 
e2ee1b.o6zAjs e2ee1b.o6zAJs e2ee1b.o6zAls 
ou1ZvGgiTZDus Ou1ZvGgiTZDUs Ou1ZvGgiTZDUs 
h_wcmvSQgr- h_wcmvSQg.V.… h_wcmvSQgx... 
图 7.7 小 程序 端 运行 效果 图 7.8 服务 器 接收 到 的 图 片 


pages/uploadFile/uploadFile.wxml 的 代码 如 下 : 


< View class = "container"> 
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< button bindtap = 'upfile'> 选 择 上 传 文件 </button> 
</view> 


pages/uploadFile/uploadFile.js 的 代码 如 下 : 


var app = getApp() 
Page({ 
data: { 
}, 
// 事 件 处 理 函 数 
upfile: function() { 
console. log(" -— bindViewTap —— ") 
wx. ChooseImage( { 
success: function(res) { 
var tempFilePaths = res.tempFilePaths 
wx. uploadFile({ 
url: 'http://127.0.0.1:8080/upload/upLoad. action'， 
header: { "Content - Type": "multipart/form— data" }, 
filePath: tempFilePaths[0], 
name: "file'， 
formData:1{ 


} 


oe function() { 
} 

)) 

【代码 讲解 】 http://127.0.0.1:8080/upload/upLoad.action 是 在 例 7-2 中 准备 好 的 后 
端 接口 ,因为 是 Struts 项 目 , 所 以 开发 者 可 以 直接 访问 action。 要 上 传 的 文件 是 通过 wx 
.chooseImage() 在 手机 上 选择 的 ,关于 wx.chooseImage() 接 口 ,将 在 第 8 章 中 讲述 。wx 
.chooseImage() 把 选择 的 图 片 保存 在 tempFilePathsL0] 中 ,因为 图 片 存 到 tempFilePaths[0] 之 
后 文件 名 已 经 变 得 不 规则 了 ,所 以 服务 器 接收 到 文件 的 名 字 也 跟着 变 得 不 规则 。 图 7.8 显 
示 的 是 服务 器 接收 到 的 从 手机 上 传 过 来 的 图 片 文件 。 


7.3 wx.downloadFile() 文 件 下 载 


wx.downloadFile(Object object) 下 载 文件 资源 到 本 地 (手机 )。 客 户 端 直 接 发 起 一 个 
HTTPS GET 请 求 , 返 回 文件 的 本 地 临时 路 径 。 因 为 是 临时 路 径 , 也 就 意味 着 用 户 不 会 知 
道真 实 的 文件 目录 ,所 以 下 载 到 临时 路 径 之 后 应 该 马上 做 后 续 的 工作 ,例如 把 临时 图 片 设置 
为 头像 ,或 者 把 临时 文件 通过 别 的 接口 真实 保存 到 手机 指定 的 目录 下 。wx.downloadFile 
(Object object) 参 数 如 表 7.6 所 示 。 


表 7.6 wx.downloadFile(Object object) 参 数 表 
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属 性 | 类 型 | 必 填 说 上 明 

url string 是 | 下 载 资源 的 url 

header Object 否 | HTTP 请 求 的 Header, Header 中 不 能 设置 Referer 
filePath string 否 | 指定 文件 下 载 后 存储 的 路 径 

Success function 否 | 接口 调用 成 功 的 回调 函数 

fail function 否 | 接口 调用 失败 的 回调 函数 

complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


示例 代码 : 


wx. downloadFile({ 

url: 'https://example. com/audio/123', // 仅 为 示例 ,并 非 真 实 的 资源 
success(res) { 

// 只 要 服务 器 有 响应 数据 ,就 会 把 响应 内 容 写 入 文件 并 进入 success 回调 ,需要 自行 判断 是 否 下 

// 载 到 了 想 要 的 内 容 

if (res. statusCode == = 200) { 

wx. playVoice( { 
filePath: res. tempFilePath 


设置 了 头像 ; 功能 二 把 图 7.9 中 第 二 幅 图 (网 络 图 片 ) 下 载 到 本 地 手机 上 保 
存 , 保 存 效 果 如 图 7.10 所 示 。 
pages/downloadFile/downloadFile.wxml 的 代码 如 下 : 


<! —— index. wml 一 一 > 
< View class = "container"> 
< view bindtap = "dian" class= "userinfo"> 
< image class = "userinfo— avatar" src="{{avatar}}" background— size = "cover"> </ image> 
< text class = "userinfo - nickname">{ {userInfo. nickName} }</text > 
</view> 
<view class = "usermotto"> 
< image src = 'https://ss3.bdstatic. com/70cFv8Sh QlYnxGkpoWK1HF6hhy 
/it/u= 3018968254, 2801372361&fm = 26&gp = 0. jpg' class = "tu"></image > 
< view bindtap = 'dian2'> 下 载 上 图 </view> 
</view> 
</view> 


【代码 讲解 】 本 例 中 有 两 个 点 击 事件 dian 和 dian2, 函数 dian 实现 从 网 络 下 载 图 片 并 
把 该 图 片 设置 为 头像 (本 来 无 头像 ) ,函数 dian2 实现 从 同一 网 络 地 址 下 载 图 片 并 把 图 片 保 
存 到 手机 相册 中 。 
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图 7.9 下 载 网 络 图 片 并 设置 头像 图 7.10 手机 相册 中 已 经 成 功 保存 图 片 
真 机 调试 界面 


pages/downloadFile/downloadFile.js 的 代码 如 下 : 


//downloadFile. js 
var app = getApp() 
Page({ 
data: { 
motto: 'Hello World'， 
userInfo: {}, 
avatar:null 
}, 
// 事 件 处 理 函 数 
dian: function() { 
console. log(" -- bindViewTap —— ") 
var that = this; 
wx. downloadFile( { 
url: 'https://ss3. bdstatic. com/70cFv8Sh QlYnxGkpoWK1HF6hhy 
/让 /u = 3018968254, 2801372361&fm = 26&gp = 0. jpg', 
type: 'image', 
success: function(res) { 
console. log(res) 
that. setData( {avatar :res. tempFilePath}) 
} 
}) 
}, 
onLoad: function() { 
console. log( "onLoad') 
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var that = this 
// 调 用 应 用 实例 的 方法 获取 全 局 数据 
app. getUserInfo(function(userInfo){ 
// 更 新 数据 
that. setData({ 
userInfo:userInfo 
}) 
}) 
}, 
dian2: function() { 
wx. downloadFile( { 
url: 'https://ss3.bdstatic. com/70cFv8Sh QlYnxGkpoWK1HF6hhy/it 
/u= 3018968254, 2801372361&fm = 26&gp = 0. jpg'， 
success: function(res) { 
console. log(res); 
var rr = res.tempFilePath; 
Wx. saveImageToPhotosAlbunm( { 
filePath: rr, 
success(res) { 
wx. ShowToast({ 
title: ' 保 存 成 功 '， 
icon: "success'， 
duration: 2000 


}) 


【代码 讲解 】 在 函数 dian 中 调用 了 wx.downloadFile() 接 口 , 下 载 成 功 ,图 片 就 会 保存 
在 res.tempFilePath 中 ,再 把 res.tempFilePath 设置 为 头像 。 在 函数 dian2 中 ,通过 wx. 


saveImageToPhotosAlbum() 接 口 把 下 载 成 功 的 图 片 保存 到 手机 相册 。 


7.4 实 训 项 目 一 一 网 络 相册 


工作 流程 如 图 7.11 所 示 。 
问题 是 小 程序 的 上 传 和 引用 没有 大 家 想 
得 这 么 简单 ,上 传 操作 我 们 在 7.2 节 已 经 实 
现 了 ,但 是 引用 呢 ? 引用 实际 上 是 一 个 复杂 的 过 程 , 它 大 致 分 
为 以 下 三 个 步骤 : 
(1) 读 取 服 务 器 菜 个 文件 夹 (每 个 客户 一 个 文件 夹 ) 中 所 
有 的 图 片 的 文件 名 。 Wn 
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网 络 相册 工作 流程 


第 7 章 ”网 络 通信 与 文件 上 传 下 载 操作 07 


(2) 把 读 到 的 文件 以 JSON 格式 显示 在 一 个 接口 文件 中 ,如 下 是 对 图 7.8 中 即 上 传 到 服 


务 器 的 那些 图 片 的 JSON 格式 的 返回 结果 ,每 一 个 大 括号 就 是 一 个 文件 的 地 址 。 


[{"file":"http://127. 0. 0. 1: 8080/xiangce/upload/wx81a9d7bbade2eelb. o6zRJs0ul1ZvGgiTZDUsh 
wcmvSQg. bYmSa6cz1Khw5b94278d919bc438c042ef13e5082cf2. jpg"}, {"file":"http://127. 0. 0. 1:8080/ 
xiangce/upload/wx81a9d7bbade2eelb. o6zAJs0ulZvGgiTZDUsh_wcmvSQg. KYxfBy18SUwk029bal250df59e 
9095970fb8219217fd. jpg"}, {"file":"http://127.0.0.1:8080/xiangce/upload/wx81a9d7bbade2eel 
b. o6zAJsOulZvGgiTZDUsh_ wcmvSQg. Pob3GneuRu9Be852b44365c2f8c22b26e69146a3b4bc. jpg"}, { " file": 
"http://127.0.0.1:8080/xiangce/upload/wx81a9d7bbade2eelb. o6zAJs0ulZvGgiTZDUsh wcmvSQg. re 
Yc8drJWnn4d8ed125c49a59922c59d8874a0d130b2. jpg"}, {"file":"http://127. 0. 0. 1: 8080/xiangce/ 
upload/wx81a9d7bbade2eelb. o6zAJs0ulZvGgiTZDUsh_wcmvSQg. V773hUbqjRgg5c835bf0c570195eablba4 
dl67fa38fe. jpg"}, { " file":" http://127. 0. 0. 1: 8080/xiangce/upload/wx81a9d7bbade2eelb. 
o6zRJs0ul1ZvGgiTZDUsh_wcmvS0g. xBenpV76xDCKb737abb3fc4b7989920fbd6a84f01c36. jpg"}, { "file": 
"http://127. 0. 0. 1: 8080/xiangce/upload/wx81a9d7bbade2eelb. o6zAJs0ulZvGgiTZDUsh _ wcmvSQg. 
zMav0IsjFtLKfc0f5b00fe67e31505fbc9398fc068b0. jpg"} ] 


(3) 在 小 程序 中 引用 第 (2) 步 得 到 的 JSON 格式 的 图 片 地 址 。 
本 项 目 难 点 在 于 不 能 假设 已 经 知道 类 似 http://127.0.0.1: 8080/xiangce/upload/1 


.jpg 的 图 片 地 址 ,这 个 地 址 是 程序 处 理 得 到 的 。 项 目的 运行 效果 如 图 7.12 所 示 , 后 端 项 目 
结构 如 图 7.13 所 示 。 


weeee WeChats 


~ 多 xiangce 
》 鱼 Deployment Descriptor xiangce 
® Deployed Resources 
> a JavaScript Resources 
器 src 
v 出 fileUpDown 
> 十 UploadActionjava 
v 让 request 
» 加 readfilejava 
和 strutsxml 
> mh JRE System Library [jdk17] 
束 Apache Tomcat v8.0 [Apache Tomcat vé| 
> 吉 Web App Libraries 
> Bh JSTL 1.2.1 Library 
会 WebRoot 
> 色 META-INF 
v 名 WEB-INF 
> Elib 
好 webxml 


至 访 filleUp.jsp 
两 列 三 列 | 了 七 fileUpSuccess.jsp 


图 7.12 网 络 相册 项 目 运 


图 7.13 后 端 项 目 结构 图 
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7.4.1 网 络 相 册 项 目 后 端 


网 络 后 端 分 为 上 传 文件 的 后 端 部 分 和 获取 文件 夹 下 所 有 图 片 并 以 JSON 格式 返回 这 些 
文件 的 后 端 接口 部 分 , 它 具 体 的 项 目 结构 图 如 图 7.13 所 示 。 项 目 为 Struts 项 目 ， 
UloadAction.java 是 Struts 的 Action, 负 责 文件 上 传 ; readfile.java 是 一 个 Servlet, 负 责 获 
取 文 件 夹 中 的 所 有 图 片 并 形成 JSON 返回 结果 给 小 程序 。 

WebRoot/ WEB-INF/web.xml 代码 如 下 : 


<?xml version = "1.0" encoding = "UTF — 8"?> 
< web — app xmlns: xsi = "http://www. w3. org/2001/XMLSchema — instance"” xmlns = "http://java. 
sun. com/xml/ns/javaee" xsi:schemaLocation = "http://java. sun. com/xml/ns/javaee http://java. 
sun. com/xml/ns/javaee/web — app_3_0.xsd" id= "WebApp_ID" version= "3.0"> 
<display — name > struts2_demo01 </display - name > 
< welcome 一 file 一 1ist> 
< welcome- file> index.html </welcome - file> 
<welcome — file> index. htm </welcome — file> 
<welcome — file> index. jsp </welcome — file> 
<welcome — file> default. html </welcome - file> 
< welcome- file> default. htm </welcome - file> 
< welcome — file> default. jsp </welcome - file> 
</welcome —- file- list> 
<filter> 
<filter - name > struts2 </filter - name > 
<filter— class > org. apache，struts2. dispatcher. ng. filter. StrutsPrepareAndExecuteFilter 
</filter ~ class> 
</filter> 
<filter 一 mapping > 
< filter ~ name > struts2 </filter - name> 
<url - pattern >/ * </url ~ pattern > 
</filter - mapping > 
< servlet > 
< servlet - name > readfile </servlet - name > 
< servlet - class > request. readfile </servlet - class> 
</servlet > 
< servlet ~ mapping> 
< servlet - name > readfile </servlet ~ name > 
< url - pattern >/readfile. servlet </url - pattern > 
</servlet - mapping> 
</web - app> 


【代码 讲解 】 本 例 的 难点 之 一 是 Struts 的 Action 和 Servlet 的 共存 问题 ,Struts 项 目 
的 uploadAction 这 个 Action 是 用 来 接收 文件 的 ,readfile 这 个 Servlet 是 用 来 返回 一 个 文件 
夹 中 所 有 图 片 的 JSON 格式 地 址 的 。 通 常情 况 下 Struts 的 Action 和 Servlet 是 不 能 共存 
的 ,可 以 通过 上 面 web.xml 的 配置 实现 二 者 的 共存 问题 。 

Action 和 Servlet 共存 的 核心 代码 : 


<servlet> 
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< servlet - name > readfile </servlet - name > 
< servlet - class > request. readfile </servlet - class> 
</servlet > 
< servlet 一 mapping> 
< servlet - name > readfile </servlet ~ name > 
<url— pattern >/readfile. servlet </url - pattern> 
</servlet — mapping > 


通常 Struts 项 目 中 不 能 存在 Servlet 文件 ,要 实现 Action 和 Servlet 共存 ,不 但 需要 配 
置 Servlet, 而 且 要 注意 使 用 < url-pattern >/readfile.servlet </url-pattern > 来 解决 共存 问题 。 


http://127.0.0.1:8080/xiangce/UploadAction (1) 
http://127.0.0.1:8080/xiangce/UploadAction. action (2) 
http://127.0.0.1:8080/xiangce/readfile (3) 
http://127.0.0.1:8080/xiangce/readfile. servlet (4) 


只 要 Web 项 目 是 Struts 项 目 , 就 可 以 通过 样式 (1) 和 样式 (2) 的 url 来 访问 Action; 在 
非 Struts 的 Web 项目 (JSP 项 目 ) 中 可 以 通过 样式 (3) 来 访问 Servlet; 在 Struts 项 目 中 如 果 
通过 样式 (3) 的 url 来 访问 Servlet, 系 统 会 把 Servlet 当成 Action 来 处 理 , 这 时 系统 就 找 不 
到 Servlet 了 ,此 时 只 能 通过 样式 (4) 的 url 来 访问 Servlet。 

src/struts.xml 代码 如 下 : 


<!DOCTYPE struts PUBLIC 
"- //aApache Software Foundation//DTD Struts Configuration 2.0//EN" 
"http://struts. apache. org/dtds/struts — 2.0.dtd"> 
<struts> 
<! -- Configuration for the default package. -一 > 
< constant name = "struts. custom. il8n. resources" value = "globalMessages" /> 
< constant name = "struts. il8n. encoding" value = "utf - 8" /> 
< constant name = "struts. multipart. saveDir" value = "/tmp"/> 
< package name = "I18N" extends = "struts - default"> 
< action name = "UploadAction" class = "fileUpDown. UploadAction"> 
< interceptor - ref name = "fileUpload"> 
<! -- 允许 的 MIME 类 型 -> 
< param name = "allowedTYpes"> image/bmp, image/png, image/gif, 
image/jpeg </param> 
<! -- 允许 上 传 文件 的 最 大 尺寸 -一 > 
< param name = "maximumSize"> 1024000 </param > 
</interceptor - ref > 
<! -- 一 定 要 写 在 后 面 -~-> 
< interceptor - ref name = "defaultStack"></interceptor - ref > 
nput">/fileUp. jsp </result> 
< result name = "success">/fileUpSuccess. jsp </result> 
</action> 
</package > 
</struts> 


【代码 讲解 】 本 例 中 的 Struts.xml 和 7.2 节 中 的 Struts.xml 是 同一 个 Struts.xml, 是 
对 Action 的 配置 ,其 中 限制 了 上 传 文件 的 格式 必须 是 图 片 , 大 小 不 能 超过 1024KB。 
src/fileUpDown/UploadAction.java 代码 如 下 : 


<result name = 
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package fileUpDown; 
import com. opensymphony. xwork2. ActionSupport; 
import java. io. File; 
import java. io. FileInputStream; 
import java. io. FileQutputStream; 
import java. io. IOException; 
import org. apache. commons. io. FileUtils; 
import org. apache. struts2. ServletActionContext; 
public class UploadAction extends ActionSupport{ 
private File file; 
private String fileContentType; 
private String fileFileName; 
public File getFile() { 
return file; 
} 
public void setFile(File file) { 
this. file = file; 
} 
public String getFileContentType() { 
return fileContentType; 
} 
public void setFileContentTYpe(String fileContentType) { 
this. fileContentType = fileContentType; 
} 
public String getFileFileName() { 
return fileFileName; 
} 
public void setFileFileName(String fileFileName) { 
this. fileFileName = fileFileName; 
} 
public String execute() throws Exception { 
// 得 到 上 传 文件 在 服务 器 的 路 径 加 文件 名 
String target = ServletActionContext. getServletContext( ). getRealPath("/upload/" + 
fileFileName); 
// 获 得 上 传 的 文件 
File targetFile = new File(target); 
// 通 过 struts2 提供 的 FileUtils 类 复制 
try { 
FileUtils. copyFile(file, targetFile); 
} catch (IOException e) { 
e. printStackTrace( ); 
} 
return SUCCESS; 


} 


【代码 讲解 】 语句 “ServletActionContext.getServletContext().getRealPath("/upload/");” 
是 获取 项 目的 路 径 然 后 在 根 目录 下 新 建 一 个 文件 夹 upload, 这 个 文件 夹 可 以 理解 为 ,不 同 
的 客户 新 建 一 个 不 同 的 文件 夹 ,用 来 保存 客户 上 传 的 文件 。 
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src/request/readfile.java 代码 如 下 : 


package request; 
import java. io. File; 
import java. io. IOException; 
import java. io. PrintWriter; 
import java. sql. Connection; 
import java. sql. DriverManager; 
import java. sql. ResultSet; 
import java. sql. Statement; 
import javax. servlet. ServletException; 
import javax. servlet. annotation. WebServlet; 
import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
import org. apache. struts2. ServletActionContext; 
import net. sf. json. JSONArray; 
import net. sf. json. JSONObject; 
/xx 
* Servlet implementation class readfile 
*/ 

public class readfile extends HttpServlet { 

private static final long serialVersionUID = 1L; 

/xx 

* @see HttpServlet#HttpServlet() 
x*/ 
public readfile() { 
super( ); 
//TODO Auto - generated constructor stub 


} 
/ 


* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 


x*/ 
protected void doGet (HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException 
{ System. out. print("11111"); 
response. setContentType( "text/json; charset = utf — 8"); 
PrintWriter out = response. getWriter(); 
String target = request. getSession( ). getServletContext(). 
getRealPath("\\") +"/upload/"; 
System. out. print (target); 
Filef = new File(target); 
JSONArray jsonarray = new JSONArray(); 
if (!f.exists()) 
{ 
out. println(" 查 无 文件 "); 
return; 
上 
File fa[] = f.1istFiles(); 
for(int i=0;i<fa.length;i++) 
| 
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File fs = fa[i]; 
System. out. print(fs. getName( )); 
System. out. print(" 开 始 " + request. getContextPath() + "/" 
+ fs.getName()); 
JSONObject jsonobj = new JSONObject(); 
jsonobj. put ("file", http://127.0.0.1:8080 
+ request. getContextPath() + "/upload/" + fs. getName( )); 


jsonarray. add( jsonobj); 


} 
out = response. getWriter(); 
out. println(jsonarray); 


} 

/ x# 
# (@see HttpServlet# doPost(HttpServletRequest request, HttpServletResponse response) 
*/ 

protected void doPost (HttpServletRequest request, HttpServletResponse response) throws 


ServletException, IOException { 
this. doGet (request, response); 


} 
【代码 讲解 】 语句 


Filef = new File(target); 

File fa[] = f.1istFiles(); 
用 来 获取 文件 夹 下 所 有 文件 ,这 时 fa[ ] 中 的 每 一 个 元 素 是 类 似 D:\apache-tomcat-8.0.3\ 
webapps\xiangce\upload\1.jpg 格式 的 文件 全 路 径 ,通过 fs.getrName() 获 取 了 类 似 “1.jpg” 格 式 
的 文件 名 ,然后 通过 和 http://127.0.0.1:8080 十 request.getContextPath() 十 "/upload/" 进 行 相 
加 ,得 到 类 似 http://127.0.0.1:8080/xiangce/upload/1.jpg 的 可 以 访问 的 网 络 地 址 ,最 后 用 
以 下 两 条 语句 : 

jsonobj. put("file", filepath); 

jsonarray. add( jsonobj); 
得 到 小 程序 可 以 访问 的 JSON 格式 的 图 片 地 址 库 , 执 行 效果 如 图 7.14 所 示 。readfile.java 
是 本 项 目 中 最 难 的 逻辑 部 分 , 需 好 好 理解 。 


图 127.0.0.1:8080/xiangce/readfi 


二 httpy/ 


机 收藏 夫 条 Lenovc 9 pyt 仆 程序 后 CC 小 程序 av JSP 页 面 。 ”小 程序 与 】 C 小 程序 图 


wcav Sg. bYnSadczlKhy5b94278d91 bc438c042ef13e50 
waaySQg.IRCkilanhg7Sr56b92013a4Sb7dc0a9cd660dcb， 
wanvSQg KYxfBy18SUwk02qbal 250df59e9095970fb8219217 


B080/xiangce/upload/wx3la9d7bbade2 
B080/xiangce/upload/wxBlagdrbbadie2; 
B080/ziangce/upload/wx3lagdbbade 呈 
8080/xiangce/upload/vx3lagdTbbade2eelb. obzAJs0ulZvCgiTZD0sh_ waavSQg Benpy762DCKb737abb3fcdb7989920fbd6a84f01c36， 
ttp://127. 0. 0. 1:B080/xiangce/upload/vx31a9d7bbade2eelb.ofzhAJs0ulZvC 栈 TZD0sh_ YanvSQg zar0TsjFtIXfc0fSb00fe67s31505fbc9398fc068b0. jpe’] ] 


图 7.14 小 程序 获取 到 的 JSON 格式 的 图 片 地 址 
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7.4.2 网 络 相册 项 目前 端 


src/photo/photo.wxml 代码 如 下 : 


<view class= "all"> 
< scroll - view scroll ~ y= "true" class = "body” style= "height:{{scrollHeight}}px;"> 

< inage bindtap = "uploadPhoto" style = "width: {{inageNidth}}rpx; height: {{ inageleight}} 
rpx;" mode = "aspectFill" class = "plus — image" src = "../../image/plus.png" /> 

<view class = "photo - list" wx:for = "{{photoList}}" wx:key =" * this" wx:for— item= 
"imageSrc"> 


< image bindtap = " previewPhoto" style = " width: {{ imageWidth }} rpx; height: 

{{imageHeight}}rpx;" mode = "aspectFill" src= "{{imageSrc. file}}"/> 

</view> 
</scroll- view> 
< View class = "bottom"> 

< button type = "default" bindtap = "two"> 了 两 列 </button > 

< button type = "default" bindtap = "three"> 三 列 </button > 
</view> 


</view> 


【代码 讲解 】 语句 “wx:for="{{photoList}} ?遍历 图 7.14 获取 到 的 JSON 数值 ,每 一 
次 循环 就 读 取 到 一 个 大 括号 ,因为 大 括号 中 的 file 属性 是 JS 文件 需要 的 ,imageSrc.file 就 
是 网 络 图 片 的 真实 可 访问 地 址 , 形 如 http://127.0.0.1:8080/xiangce/upload/1.jpg。 

src/photo/photo.js 代码 如 下 : 


var app = getApp(); 
Page( { 
data: { 
scrollHeight:569, 
imageWidth:250, 
imageHeight :250, 
photoList:[] 
}, 
uploadPhoto: function( ){ 
console. log(" 从 本 地 选取 图 片 "); 
var that = this; 
Var showFileList = that. data. photoList; 
wx. ChooseImage( { 
count: 9, // 最 多 可 以 选择 的 图 片 张 数 ,默认 为 9 
sizeType: ['original', 'compressed']，//original: 原 图 ,compressed: 压缩 图 
sourceType: ['album'，'camera']，//album: 从 相册 选 图 ,camera: 使 用 相机 
success: function(res){ 
// 后 台 慢 慢 保存 文件 到 本 地 
var tempFilePaths = res.tempFilePaths 
wx. uploadFile( { 
url: 'http://127.0.0.1:8080/xiangce/UploadAction. action'， 
header: { "Content — TYpe" : "multipart/form— data" }, 
filePath: tempFilePaths[0], 
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name: 'file', 
formData: { 


]， 
previewPhoto:function(el){ 


console. log(el); 
var curTarget = el.target. dataset. src 
console. log(curTarget); 
wx. previewImage({ 
current: curTarget, // 当 前 显示 图 片 的 链接 ,不 填 则 默认 为 urls 的 第 一 张 
urls: this. data. photobist, 
success: function(res){ 
//success 
console. log(res); 
} 
}) 
}, 
two: function( ){ 
var that = this; 
var length = 750/2; 
that. setData( { 
imageWidth:1length, 
imageHeight :length 
}); 
}, 
three: function( ){ 
var that = this; 
var length = 750/3; 
that. setData( { 
imageWidth: length, 
imageHeight:length 
}); 
}, 
onLoad: function(){ 
console. log(" 加 载 图 片 列表 "); 
var that = this; 
// 获 取 当 前 窗口 高 度 ,以便 设置 scrollView 的 高 度 
wx. getSystemInfo( { 
success: function(res) { 
console. log( res. model); 
console. log( res. pixelRatio); 
console. log( res. windowWidth) ; 
console. log( res. windowHeight); 
console. log( res. version); 
that. setData( { 
scrollHeight :res. windowHeight 
]) 
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}) 
wx. request ({ 
url: 'http://127.0.0.1:8080/xiangce/readfile. servlet', 
// 仅 为 示例 ,并 非 真 实 的 接口 地 址 
data: { 
0 
y: 
}, 
header: { 
'content — type': 'application/json' // 默 认 值 
} 
success(res) { 
console. log(res) 
that. setData({ 
photoList: res. data 
}) 
} 
}) 
}, 
onShow: function() { 
} 
}) 


【代码 讲解 】 函数 upPhoto: function() 实 现 图 片 的 上 传 功能 , 它 先 调用 wx 
.chooseImage() 接 口 去 相册 选择 图 片 或 者 以 直接 拍照 的 方式 获取 本 地 手机 图 片 ， 
sourceType: ['album','camera'] 指 可 以 选择 相册 图 片 ,也 可 以 即时 拍照 ; wx.request() 读 
取 Servlet 接口 的 JSON 地 址 库 , 然 后 通过 photoList: res.data 赋值 给 photoList; 函数 two 
和 three 实现 了 相册 列 数 的 控制 ; previewPhoto:function(el) 函数 实现 了 具体 一 张 图 片 的 
预览 功能 。 

src/photo/photo.wxss 代码 如 下 : 

.all{ 

height: 100 %; 
background - color: #eee; 
padding:0; 

margin:4rpx 0 0 0; 

box - sizing: border - box; 


.body{ 
margin ~— bottom: 4rpx; 


.plus - image{ 
width:250rpx; 
height :250rpx; 


.photo— list{ 
display: inline- block; 


.Photo— list image { 


267 


} 
.bottom{ 

width:100 多 7 

border - top:2rpx gray solid; 


} 
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width:250rpx; 
height: 250rpx; 


display: flex; 
flex — direction: row; 
flex — wrap: nowrap; 
align - items: center; 
bottom: 0; 


.bottom button { 
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width: 100 %; 
border - radius: 0; 


媒体 与 设备 操作 


小 程序 提供 了 大 量 和 手机 硬件 相关 的 操作 接口 ,其 中 最 主要 的 就 是 媒体 和 设备 操作 。 
本 节 将 介绍 地 图 位置. 图 片 视 频 、 录 音 、 音 频 播放 控制 .背景 音乐 .获取 系统 信息 、 网 络 环境 
和 电量 等 接口 。 微 信 小 程序 官方 2019 年 对 其 中 一 些 接口 进行 了 更 新 ,这 也 间接 反映 出 这 些 
接口 在 小 程序 开发 中 的 重要 地 位 。 

本 章 主 要 目标 

。 了 解 微 信 小 程序 常用 的 媒体 和 设备 接口 ; 

。 熟练 掌握 地 图 、 位 置 . 图 片 、 视 频 、 录 音 、 音 频 播放 控制 .背景 音乐 .获取 系统 信息 、 网 

络 环境 和 电量 等 接口 操作 ; 
。 使 用 AudioContext 对 象 完成 音乐 播放 器 的 制作 。 


8.1 地 图 与 位 置 


小 程序 经 常会 用 到 地 图 和 位 置 功能 ,这 两 个 功能 都 以 经 度 和 纬度 为 基础 ,是 相关 性 很 大 
的 操作 ,所 以 本 节 将 它们 安排 在 一 起 来 讲 , 读 者 需 重点 理解 map 组 件 和 wx.openLocation() 
接口 的 区 别 。 


8.1.1 地 图 


map 是 一 个 比较 复杂 的 组 件 , 它 有 很 多 参数 ,如 表 8.1 所 示 。 
表 8.1 map 组 件 参数 表 


属 性 类 型 必 填 说 明 
longitude number 是 中 心经 度 
latitude number 是 中 心 纬度 
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续 表 
属 性 类 型 必 填 说 上 明 
scale number 否 缩放 级 别 , 取 值 范围 为 5 一 18 
markers Array.< marker > 否 标记 点 
covers Array.< cover > 否 即将 移 除 , 请 使 用 markers 
polyline Array.< polyline > 否 路 线 
circles Array.< circle > 否 圆 
controls Array.< control > 否 控件 (即将 废弃 ,建议 使 用 cover-view 代替 ) 
include-points Array.< point > 否 缩放 视野 以 包含 所 有 给 定 的 坐标 点 
show-location boolean 否 显示 带 有 方向 的 当前 定位 点 
polygons Array.< polygon > 否 多 边 形 


map 组 件 的 两 个 属性 longitude 和 latitude 表示 当前 地 图 中 心 的 经 度 和 纬度 ,和 当前 用 
户 所 在 位 置 的 经 度 和 纬度 是 不 同 的 概念 ,无 直接 关系 。 例 如 , 某 人 在 广东 省 东莞 市 ,但 是 可 
以 打开 以 北京 天 安 门 为 中 心 的 一 幅 地 图 ,map 的 longitude 和 latitude 是 用 来 控制 地 图 中 心 
的 参数 ,并 不 是 用 户 实时 的 地 理 位 置 。 

贺 8-! map 组 件 显示 地 图 ,程序 运行 效果 如 图 8.1 所 示 。 


视频 讲解 


广东 省 名 工 
技师 学 院 
信康 乐 小 
海珠 区 东风 
也 时 路 第 二 小 学 和 
i } rn 


图 8.1 map 运行 效果 
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pages/map/map.wxml 的 代码 如 下 : 


<map id= "tu" latitude = '23. 099' longitude = '113.325' scale = '15'class= "tu" controls= 
'{{con}}' markers = '{ {mar}}' bindcontroltap = 'con' bindmarkertap = ‘mar'> 
</map> 


pages/map/map.js 的 代码 如 下 : 


Page({ 

data: { 

mar:[{ 
inconPath:"location. png", 
id:0, 

latitude:23.088994, 
longitude:113.324520, 
width:50, 

heigth:50 


iconPath: 'location. png', 
positon: {left:0, 
top:50, 
width:50, 
height:50}, 
clickable:true 
}], 


mar:function(e) 
{console. 1og(" 你 点 了 标记 点 ")}， 


con: function (e) { console.1og(" 你 点 了 游标 ") } 
}) 


map 只 能 简单 地 生成 一 幅 地 图 ,要 对 地 图 进行 某 些 操作 ,如 进行 缩放 和 移动 操作 ,开发 
者 必须 先 在 JS 中 获取 MapContext 对 象 ,这 时 需要 通过 wx.createMapContext('id') 获 取 
MapContext 对 象 。 读 者 可 以 理解 为 wx.createMapContext('id') 就 是 指向 地 图 的 一 个 指针 。 
MapContext 对 象 常用 操作 如 表 8.2 所 示 。 


表 8.2 MapContext 对 象 常用 操作 函数 
接 口 功能 和 用 途 


获取 当前 地 图 中 心 的 经 度 和 纬度 。 返 回 的 是 gcj02 坐标 


MapContext.getCenterLocation() . 
系 ,可 以 用 于 wx.openLocation() 


将 地 图 中 心 移动 到 当前 定位 点 。 需 要 配合 map 组 件 的 


MapContext.moveToLocation() 
show-location 使 用 


MapContext.translateMarker(Object object) | 平移 marker. 带 动画 


MapContext.includePoints(Object object) 缩放 视野 展示 所 有 经 度 和 纬度 


MapContext.getRegion() 获取 当前 地 图 的 视野 范围 


MapContext.getScale() 获取 当前 地 图 的 缩放 级 别 
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需要 说 明 的 是 MapContext.getRegion() 接 口 获取 图 片 的 范围 , 即 是 经 度 和 纬度 的 取 值 
范围 , 取 值 范围 是 以 地 图 的 西南 和 东北 两 个 顶点 的 经 度 和 纬度 来 限定 的 。MapContext 
. translateMarker() 和 MapContext.includePoints() 两 个 接口 中 需要 用 到 的 经 度 和 纬度 不 
s 回 能 超出 MapContext.getRegion() 接 口 的 经 度 和 纬度 取 值 范围 。 例 8-2 有 助 


[ 贺 8-? MapContext 实例 的 常见 操作 ,本 例 将 对 地 图 做 获取 地 图 中 
. 心经 度 和 纬度 ,移动 到 当前 位 置 .获取 缩放 比例 等 操作 。 程 序 的 运行 效果 如 
视频 讲解 。 图 8.2 所 示 。 


获取 地 图 中 心 的 经 度 和 纬度 
将 地 图 中 心 移动 到 当前 定位 点 


平移 marker， 带 动画 


缩放 视野 展示 所 有 经 度 和 纬度 


获取 当前 地 图 的 缩放 级 别 


获取 当前 地 图 的 视野 范围 


图 8.2 ”Mapcontext 运行 效果 


pages/MapContext/MapContext.wxml 的 代码 如 下 : 


<map 

id= "ditu" 

style = "width: 710rpx; height: 250px;" 

latitude = "{{latitude}}" 

longitude = "{{longitude}}" 

markers = "{{markers}}" 

show— location> 
</map > 
< button bindtap = "getCenterLocation" type = "primary"> 获 取 地 图 中 心 的 经 度 和 纬度 </button> 
< button bindtap = "moveToLocation” type= "primary"> 将 地 图 中 心 移动 到 当前 定位 点 </button> 
< button bindtap = "translateMarker" type = "primary"> 平 移 marker, 带 动画 </button > 
< button bindtap = "includePoints" type = "primary"> 缩 放 视野 展示 所 有 经 度 和 纬度 </button > 
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< button bindtap = "scaleClick" type = "primary"> 获 取 当 前 地 图 的 缩放 级 别 </button > 
< button bindtap = "getRegionClick" type = "primary"> 获 取 当 前 地 图 的 视野 范围 </button> 


pages/MapContext/MapContext.js 的 代码 如 下 : 


Page({ 
data: { 
latitude: 22.557416086996245, 
longitude: 113.3832685578842, 
markers: [{ 
id: 1, 
latitude: 22.557416086996245, 
longitude: 113.3832685578842, 
name: ' 中 山北 站 " 
}], 
}, 
onReady: function(e) { 
// 创 建 map 上 下 文 MapContext 对 象 
this. zhizhen = wx.createMapContext( 'ditu') 
}, 
// 获 取 当 前 地 图 中 心 的 经 度 和 纬度 
getCenterLocation: function() { 
this. zhizhen. getCenterLocation({ 
success: function(res) { 
console. log(res. longitude) 
console. log(res. latitude) 
} 
}) 
}, 
// 将 地 图 中 心 移动 到 当前 定位 点 
moveToLocation: function() { 
this. zhizhen. moveToLocation( ) 
}, 
// 平 移 marker, 带 动画 
translateMarker: function() { 
this. zhizhen. translateMarker( { 
markerId: 1, 
autoRotate: true, 
duration: 1000, 
destination: { 
latitude: 22.55229, 
longitude: 113.3845211, 
}, 
animationEnd() { 


console. l0g( 'animation end') 


]) 
}, 
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// 缩 放 视野 展示 所 有 经 度 和 纬度 
includePoints: function() { 
this. zhizhen. includePoints({ 
padding: [10], 
points: [{ 
latitude: 22.54229, 
longitude: 113.3745211, 
},{ 
latitude: 22.55229, 
longitude: 113.3845211, 
}] 
}) 
}, 
// 获 取 当 前 地 图 的 缩放 级 别 
scaleClick: function() { 
this. zhizhen. getScale( { 
success: function(res) { 
console. log(res. scale) 
} 
}) 
}, 
// 获 取 当 前 地 图 的 视野 范围 
getRegionClick: function() { 
this. zhizhen. getRegion({ 
success: function(res) { 
console. log( res. southwest) 
console. log( res. northeast) 
} 
}) 
} 
}) 


【代码 讲解 】 this.zhizhen 二 wx.createMapContext('ditu') 获 取 MapContext 实例 ,此 时 在 
JS 文 件 中 ,this.zhizhen 就 代表 了 那 幅 地 图 ,然后 通过 类 似 this.zhizhen. getCenterLocation() 和 
this.zhizhen.moveToLocation() 接 口 就 可 以 对 地 图 进行 各 种 相关 操作 了 。 

通过 控制 台 打 印 this.zhizhen.getRegion() 的 经 度 和 纬度 取 值 ,本 例 中 的 取 值 范围 为 
(22. 547507698481496, 113. 37030812392423 ) 一 (22. 56732376379575, 113. 39622899184415 ) , 
this.zhizhen.includePoints() 和 this.zhizhen.translateMarker() 两 个 接口 的 经 度 和 纬度 取 值 
范围 就 应 该 在 这 个 区 间 里 面 。 


8.1.2 ”位置 

小 程序 提供 了 3 个 接口 对 位 置 进行 操作 : wx.getLocation(Object object) 接 口 获取 当前 
的 地 理 位 置 ; wx.openLocation(Object object) 接 口 实现 使 用 微 信 内 置地 图 查看 位 置 功能 ; 
wx.chooseLocation(Object object) 接 口 选择 一 个 位 置 来 打开 地 图 。 
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1. wx.getLocation(Object object) 接 口 
常用 的 wx.getLocation(Object object) 接 口 的 属性 如 表 8.3 所 示 。 


表 8.3 wx.getLocation(Object object) 属 性 表 


属 性 类 型 | 必 填 说 明 
type string 否 | wgs84 返回 gps 坐标 ,gcj02 返回 可 用 于 wx.openLocation() 的 坐标 
i ee 否 传人 true 会 返回 高 度 信息 ,由 于 获取 高 度 需要 较 高 精确 度 , 所 以 会 减 
慢 接口 返回 速度 
Success function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 
complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 》 
示例 代码 : 


wx. getLocation({ 
type: 'wgs84', 
success(res) { 
const latitude = res. latitude 
const longitude = res. longitude 
const speed = res. speed 
const accuracy = res.accuracy 
} 
}) 


从 示例 代码 可 以 发 现 ,wx.getLocation() 接 口 只 是 获取 当前 位 置 的 经 度 和 纬度 。 
2. wx.openLocation(Object object) 接 口 
常用 的 wx.openLocation(Object object) 接 口 的 属性 如 表 8.4 所 示 。 


表 8.4 wx.openLocation(Object object) 属 性 表 


属 性 类 型 | 必 填 说 明 

latitude number 是 | 纬度 ,范围 为 一 90" 一 90" ,负数 表示 南 纬 ,使 用 gcj02 国 测 局 坐标 系 
longitude number 是 | 经 度 ,范围 为 一 180" 一 180" ,负数 表示 西 经 ,使 用 gcj02 国 测 局 坐标 系 
scale number 否 | 缩放 比例 ,范围 为 5 一 18 

name string 否 | 位 置 名 

address string 否 | 地 址 的 详细 说 明 

success function 否 | 接口 调用 成 功 的 回调 函数 

fail function 否 | 接口 调用 失败 的 回调 函数 

complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


示例 代码 : 


wx. getLocation({ 
type: 'gcj02', // 返 回 可 以 用 于 wx. openLocation() 的 经 度 和 纬度 
success(res) { 
const latitude = res. latitude 
const longitude = res. longitude 
wx. openLocation({ 
latitude, 
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longitude, 
scale: 18 
}) 
} 


}) 

从 示例 代码 可 以 发 现 ,wx.openLocation() 接 口 是 打 开 一 个 位 置 , 它 需要 经 度 值 和 纬度 
值 作为 打开 位 置 的 参数 。wx.getLocation() 接 口 是 获 取 用 户 当 前 所 在 位 置 的 经 度 和 纬度 ， 
可 以 作为 wx.openLocation( ) 接口 的 参数 ,当然 也 可 以 指定 一 个 经 度 和 纬度 来 打开 位 置 
地 图 。 

贺 8-3 wx.openLocation() 接 口 的 应 用 案例 ,程序 运行 效果 如 图 8.3 所 示 。 


视频 讲解 


QQ 查看 周边 


困 


图 8.3 ”openLocation 运行 效 


pages/openLocation/openLocation.wxml 的 代码 如 下 : 


< view class = "container"> 
<view bindtap = "bindViewTap”class = "userinfo"> 
< image class = "userinfo ~ avatar" src="{{userInfo.avatarUrl}}" 
background — size = "cover"></image > 
< text class = "userinfo - nickname">{ {userInfo. nickName} }</text > 
</view> 
< view class = "usermotto"> 
< text class = "user ~ motto">{{mottol}</text> 
</view> 
</view> 
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【代码 讲解 】 本 例 中 WXML 文件 不 起 作用 ,因为 JS 代码 写 在 了 onload 函数 中 ,会 自 
动 加 载 wx.openLacation() 接 口 。 
pages/openLocation/openLocation.wxml 的 代码 如 下 : 


// 获 取 应 用 实例 
var app = getApp() 
Page({ 

data: { 


motto: 'Hello World', 
userInfo: {} 
}, 
// 事 件 处 理 函 数 
bindViewTap: function() { 
wx. navigateTo( { 
url: '../logs/logs' 
}) 
}, 
onLoad: function() { 
console. log( 'onLoad') 
var that = this 
// 调 用 应 用 实例 的 方法 获取 全 局 数据 
app. getUserInfo(function(userInfo) { 
// 更 新 数据 
that. setData( { 
userInfo: userInfo 
}) 
}) 
wx. getLocation({ 
type: 'gcj02'， // 返 回 可 以 用 于 wx. openLocation 的 经 度 和 纬度 
success(res) { 
const latitude = res. latitude 
const longitude = res. longitude 
wx. openLocation( { 
latitude, 
longitude, 
scale: 18 


【代码 讲解 】 本 例 先 用 wx.getLoaction() 接 口 获取 经 度 和 纬度 , 青 用 wx.openLoaction() 
接口 使 用 wx.getLocation() 接 口 获 取 的 经 度 和 纬度 打开 位 置地 图 。 

3. wx.chooseLocation(Object object) 接 口 

常用 的 wx.chooseLocation(Object object) 的 属性 如 表 8.5 所 示 。 


277 


开发 从 入 门 到 实战 微 课 视频 版 


表 8.5 wx.chooseLocation(Object object) 属 性 表 


success function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 
complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


wx.chooseLocation( Object object) 接口 是 选择 一 个 地 理 位 置 , 请 注意 区 分 wx 
.chooseLocation(O 〇 bject object) 接 口 与 其 他 接口 的 不 同 点 。 
[ 辆 8-4 wx. chooseLocation (Object object) 接口 的 应 用 案例 ,程序 运行 效果 如 
图 8.4 所 示 。 
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图 8.4 ”chooseLocation 运行 效果 


pages/chooseLocation/chooseLocation.js 的 代码 如 下 : 


// 获 取 应 用 实例 
var app = getApp() 
Page({ 

data: { 


motto: "Hello World'， 
userInfo: {} 
}, 
// 事 件 处 理 函 数 
bindViewTap: function() { 
Wx. navigateTo( { 
url: '../openLocation/openLocation' 
}) 
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}, 
onLoad: function() { 
console. log( 'onLoad') 
var that = this 
// 调 用 应 用 实例 的 方法 获取 全 局 数据 
app. getUserInfo( function(userInfo){ 
// 更 新 数据 
that. setData({ 
userInfo:userInfo 
}) 
}) 
wx. getLocation({ 
type: '"wgs84'， // 默 认为 wgs84 返回 gps 坐标 ,gcj02 返回 可 用 于 wx. openLocation() 的 坐标 
success: function(res){ 
var latitude = res. latitude 
var longitude = res. longitude 
Wx. ChooseLocation({ 
latitude: latitude, 
longitude: longitude, 
success: function(res){ 
console. log(res) 
}, 
fail: function() { 
//fail 
}, 
complete: function() { 
//complete 
} 
}) 
}, 
fail: function() { 
//fail 
}, 
complete: function() { 
//complete 


【代码 讲解 】 本 例 先 用 wx.getLocation() 接 口 获取 经 度 和 纬度 ,再 用 wx.chooseLocation() 
接口 使 用 wx.getLocation() 接 口 获 取 的 经 度 和 纬度 选择 打开 位 置地 图 ,运行 效果 如 图 8.4 
所 示 ,注意 在 其 右上 角 有 一 个 “确定 ?按钮 ,该 按钮 即 为 wx.chooseLocation() 接 口 “选择 ”二 
字 的 含义 所 在 。 


小 程序 提供 了 6 个 图 片 API 接口 ,分 别 是 : wx.chooseImage(Object object) 接 口 ,从 本 
地 相册 选择 图 片 或 使 用 相机 拍照 ; wx.chooseMessageFile(O 〇 bject object) 接 口 ,从 客户 端 会 
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话 选择 文件 ，wx.compressImage(Object object) 接口 ,压缩 图 片 接口 ,可 选 压 缩 质量 ;wx 
.getImageInfo(CObject object) 接 口 ,获取 图 片 信 息 ; wx.previewImage(Object object) 接 口 ， 
在 新 页 面 中 全 屏 预 览 图 片 ; wx.saveImageToPhotosAlbum(Object object) 接口 ,保存 图 片 
到 手机 本 地 相册 。 本 节 只 介绍 几 个 主要 的 接口 。 

1. wx.chooseImage(Object object) 接 口 

wx.chooseImage(Object object) 接 口 从 本 地 相册 选择 图 片 或 使 用 相机 拍照 ,属性 如 
表 8.6 所 示 。 


表 8.6 ”wx.chooseImage( ) 接 口 属性 表 


接 口 类 型 必 填 说 明 

count number 否 | 最 多 可 以 选择 的 图 片 张 数 

sizeType Array.< string > 否 | 所 选 图 片 的 尺寸 

sourceType Array.< string > 否 | 选择 图 片 的 来 源 

success function 否 | 接口 调用 成 功 的 回调 函数 

fail function 否 | 接口 调用 失败 的 回调 函数 

complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 

示例 代码 : 


Wx. chooseImage({ 
count: 1, 
sizeType: ['original', 'compressed'], 
sourceType: ['album', ‘camera'], 
success(res) { 
//tempFilePaths 可 以 作为 img 标签 的 src 属性 显示 图 片 
const tempFilePaths = res.tempFilePaths 
} 
}) 


2. wx.getImageInfo(Object object) 接 口 
wx.getImagelInfo(Object object) 接 口 获取 图 片 信息 ,包括 图 片 的 类 型 高 度 和 宽度 , 属 
性 如 表 8.7 所 示 。 


表 8.7 ”wx.getImageInfo( ) 接 口 属性 表 


接 口 类 型 | 必 填 说 明 
> 图 片 的 路 径 , 可 以 是 相对 路 径 、 临 时 文件 路 径 、 存 储 文件 路 径 、 网 络 图 
SITC string 是 
片 路 径 
success function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 
complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 
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[ 贺 8-5 本 例 先 调用 wx.chooselmage() 接 口 ,然后 调用 wx .getImageInfo() 接 口 ,第 
一 个 接口 获取 的 图 片 供 第 二 个 接口 使 用 ,输出 选中 的 图 片 的 信息 ,程序 运行 效果 如 图 8.5 
所 示 。 


wx.getlmagelnfo 


视频 讲解 


请 选择 图 片 
你 选中 的 图 片 的 类 型 是 jpeg 
你 选中 的 图 片 的 height 是 300 
你 选中 的 图 片 的 width 是 300 


图 8.5 ”wx.getImagelnfo() 运 行 效果 


pages/getImagelInfo/getImagelInfo.wxml 的 代码 如 下 : 


<view class = "container"> 
< View class = "userinfo"> 
< button bindtap = "choose"> 请 选择 图 片 </button > 
</view> 
<view > 你 选中 的 图 片 的 类 型 是 { {type}}</view> 
<view > 你 选中 的 图 片 的 height 是 {{height}}</view> 
<view > 你 选中 的 图 片 的 width 是 {{fwidth} }</view> 
</view> 


pages/getImageInfo/getImageInfo.js 的 代码 如 下 : 


const app = getApp() 
Page({ 
data: { 
type: vv 
height:null， 
width:null, 
}, 
onLoad: function() { 
}, 
choose: function(e) { 
var that = this; 
wx. chooseImage( { 
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success(res) { 
wx. getImageInfo( { 
src: res. tempFilePaths[0], 
success(res) { 
that. data. type = res. type, 
that. data. height = res. height, 
that. data. width = res. width 
console. log(res) 
that. setData( { 
type: res. type, 
height :res. height, 
width: res. width 
}) 


【代码 讲解 】 本 例 先 调用 wx.chooseImage() 接 口 选择 本 地 手机 的 一 幅 图 片 ,然后 调用 
wx.getImageInfo() 接 口 获取 图 片 的 信息 ,信息 包括 type、width 和 height 等 。 图 8.5 显示 了 
wx.getImageInfo() 获 取 的 信息 。 

3. wx.previewImage(Object object) 接口 

wx.previewImage(O 〇 bject object) 接 口 对 图 片 进行 预览 操作 ,小 程序 可 以 预览 多 张 图 
片 ,属性 如 表 8.8 所 示 。 


表 8.8 ”wx.previewImage( ) 接 口 属性 表 


接 口 类 型 必 填 说 明 
urls Array.< string > 是 | 需要 预览 的 图 片 链接 列表 。 从 2.2.3 版 本 开始 支持 云 文件 ID 
current string 否 当前 显示 图 片 的 链接 
Success function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 
complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 
示例 代码 : 
wx. previewImage( { 
current: '', // 当 前 显示 图 片 的 http 链接 
urls: [] // 需 要 预览 的 图 片 http 链接 列表 
}) 


[ 融 8-6 本 例 实现 点 击 一 组 网 络 图 片 进行 预览 的 功能 ,程序 运行 效果 如 图 8.6 所 示 。 
pages/previewImage/previewImage.wxml 的 代码 如 下 : 


<view class = "container"> 
< scroll - view scroll ~- y= "true" class = "show — area" style= "height:{{scrollHeight} }px;"> 
<view class = "photo - list" wx:for="{{photoList}}" > 


<image id= "{{item}}" bindtap= "previewPhoto" 
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style = "width: {{imageWidth} }rpx; height: {{ imageHeight} }rpx;" 
mode = "aspectFill" src="{{item}}"/> 
</view> 
</scroll - view> 


</view> 


保存 图 片 


收藏 


图 8.6 预览 效果 
pages/previewImage/previewImage.js 的 代码 如 下 : 


var app = getApp(); 
Page({ 
data:{ 
scrollHeight:569, 
imageWidth:250, 
imageHeight:250, 
photoList: ['https://timgsa. baidu. com/timg? image&quality = 80&size = b9999 
_10000&sec = 1563898546498&di = b7326b07d8a4734fealf5cbdd795ed99&imgtype = 0&src = https 
3A % 2F % 2Fimg. romzhijia. net % 2Farticlepic % 2F2019 % 2F3 % 2F12% 2F15 % 2F50 % 2Fefeb6d52 — 
d5ef - 4195 - a201 - c4b6309b6bbe. jpg', 'https://timgsa. baidu. com/timg?imageg&quality = 80&size 
= b9999_10000&sec = 1563898547199&di = 7ecel97fcleec8b051a4b97bae022acl&imgtype = 0&src = 
http% 3A% 2F% 2Fwww. fabuzhe. com. cn% 2Fresources% 2Fupload% 2Fjsp% 2Fupload% 2Fimage%® 
2F20190418 % 2F1555554319079014095. jpg', 'https://timgsa. baidu. com/timg? image&quality = 
80&size = b9999_10000&sec = 1563898547199&di = 8a7f838alf73468b4a5c2f110b45b482&imgtype = 
0&src = http% 3A% 2F % 2Fpicl. cxtuku. com% 2F00 % 2F09 % 2F36 % 2Fb562e69ba9a3. jpg'] 
}, 
previewPhoto:function(e){ 


console. log(e); 
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var curTarget = e.currentTarget. id 
console. log(curTarget) ; 
var shuzu = [e.currentTarget. id] 
wx. previewImage({ 
urls:this. data. photoList, 
success: function(res){ 
console. log(res); 
} 
}) 


}) 


【代码 讲解 】 photoList 数组 里 面 的 图 片 地 址 是 previewImage.wxml 中 需要 显示 的 图 
片 库 ,也 是 previewImage.js 中 wx. previewImage() 接 口 需要 预览 的 图 片 库 。 注 意 wx 
.previewImage() 接 口 一 般 预 览 的 是 一 组 图 片 而 很 少 是 一 张 图 片 , 故 需要 一 个 类 似 于 
photoList 的 数组 。 

4. wx.saveImageToPhotosAlbum(Object object) 接 口 

wx.saveImageToPhotosAlbum (Object object) 接口 ,保存 图 片 到 相册 ,具体 属性 如 
表 8.9 所 示 。 


表 8.9 wx.saveImageToPhotosAlbum() 接 口 属性 表 


接 口 类 型 | 必 填 说 明 
图 片 文件 路 径 , 可 以 是 临时 文件 路 径 或 永久 文件 路 径 , 不 支持 网 络 图 
filePath string 是 
片 路 径 

success function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 
complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 

示例 代码 : 

wx. saveImageToPhotosAlbum( 


Success(res) { } 


}) 


加 8-7 本 例 实现 点 击 一 幅 网 络 图 片 保存 到 本 地 手机 ,程序 运行 效果 如 
图 8.7 所 示 。 
pages/saveImage/saveImage.wxml 的 代码 如 下 : 


< View class = "container"> 
< scroll - view scroll -Y= "true" class = "show— area” style = "height:{{scrollHeight}}px; "> 
< view class = "photo - list" wx:for = "{{photoList}}”wx:key = "x this”wx:for - item = 
"imageSrc"> 
< image id="{{imageSrc. file}}" bindtap="saveImage" style= "width:{{imageWidth}}rpx; 
height:{{imageHeight}}rpx;" mode = "aspectFill" src="{{imageSrc. file}}"/> 
</view> 
</scroll — view> 


</view> 
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wxid_6efo5zatas2v21 的 接口 测试 号 . 


保存 图 片 或 视频 到 你 的 相册 


se 


图 8.7 保存 图 片 到 相册 效果 
pages/saveImage/saveImage.js 的 代码 如 下 : 


var app = getApp(); 
Page({ 
data: { 
scrollHeight: 569, 
imageWidth: 250, 
imageHeight: 250, 
curTarget: "", 
photoList: [{ 
file: "http://hbimg. b0. upaiyun. com/53ecac6cd550461d2596aee47 
f80a7d42ce990ab784ce — f7i61N_fw658" 
}] 
}, 
saveImage: function(e) { 
wx. downloadFile({ 
url: 'http://hbimg. b0. upaiyun. com/53ecac6cd550461d2596aee47 
f80a7d42ce990ab784ce — f7i61N fw658'， 
success: function(res) { 
console. log(res); 
// 图 片 保存 到 本 地 


wx. saveImageToPhotosAlbum({ 
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filePath: res. tempFilePath, 

success: function(data) { 
console. log(data); 

}, 


【代码 讲解 】 wx.savelImageToPhotosAlbum() 接 口 不 能 直接 对 网 络 图片 进 行 保存 操 
作 , 所 以 本 例 中 先 使 用 了 wx. downloadFile( ) 接 口 下 载 网 络 图 片 到 本 地 形成 临时 文件 
e.tempFilePath ,然后 再 把 e.tempFilePath 作为 wx.savelImageToPhotosAlbum() 接 口 的 下 


8.3 视频 


小 程序 提供 了 wx. createVideoContext (string id, Object this ) 、wx. chooseVideo 
(Object object)、wx. saveVideoToPhotosAlbum (Object object) 等 接口 对 手机 视频 进行 


操作 。 


1. wx.createVideoContext(string id，Object this) 接口 


wx. createVideoContext (string id，Object this) 接口 负责 创建 video 上 下 文 


VideoContext 对 象 。 其 语法 如 下 : 


this. videoContext = wx.createVideoContext( 'myVideo') 


获取 VideoContext 对 象 之 后 ,就 可 以 对 视频 做 相关 操作 了 。VideoContext 对 象 常 用 函 


数 如 表 8.10 所 示 。 


表 8.10 VideoContext 对 象 常用 函数 


接 口 功能 和 用 途 
VideoContext.play() 播放 视频 
VideoContext.pause( ) 暂停 视频 
VideoContext. stop() 停止 视频 
VideoContext.seek(number position) 跳 转 到 指定 位 置 
VideoContext.sendDanmu( Object data) 发 送 弹 幕 
VideoContext.playbackRate(number rate) 设置 倍速 播放 
VideoContext.requestFullScreen( Object object) 进入 全 屏 
VideoContext.exitFullScreen() 退出 全 屏 
VideoContext.showStatusBar() 显示 状态 栏 , 仅 在 iOS 全 屏 下 有 效 
VideoContext.hideStatusBar() 隐藏 状态 栏 , 仅 在 iOS 全 屏 下 有 效 
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[加 ] 8-8 本 例 使 用 wx.createVideoContext() 创 建 video 上 下 文 VideoContext 对 象 ,然后 再 
对 视频 进行 发 送 弹 幕 .播放 ,暂停 .定位 和 回 滚 操作 ,程序 运行 效果 如 图 8.8 所 示 。 


跳 到 2 分 钟 位 置 


回 到 开头 
(ss eeeeedl 
图 8.8 ”VideoContext 对 象 运行 效果 


pages/createVideoContext/createVideoContext.wxml 的 代码 如 下 : 


<view class = "section tc"> 
<video id= "myVideo" src= "http://wxsnsdy.tc.qq.com/105/20210/snsdy 
videodownload?filekey = 30280201010421301f0201690402534804102ca905ce620b1241b7 
26bc41dcff44e00204012882540400&bizid = 1023&hy = SH&fileparam = 302c02010104253023 
0204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 
danmu— list = "{{danmuList}}”enable - danmu danmu— btn controls ></video> 
<view class = "btn - area"> 
< input bindblur = "bindInputBlur" /> 
< button bindtap = "bindSendDanmu"> 发 送 弹 幕 </button > 
</view> 
</view> 
< button type = "primary" bindtap = "audioPlay"> 播 放 </button> 
< button type = "primary" bindtap = "audioPause"> 和 暂停 </button> 
< button type rimary”bindtap = "audiol4"> 跳 到 2 分 钟 位 置 </button > 
< button type = "primary" bindtap = "audioStart"> 回 到 开头 </button > 


pages/createVideoContext/createVideoContext.js 的 代码 如 下 : 


function getRandomColor() { 
const rgb = [] 
for (let i = 0; i<3; ++i) { 
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let color = Math.floor(Math. random() * 256).toString(16) 
Color = color.length == 1 ? '0' + color : color 
rgb. push(color) 
} 
return '#' + rgb. join(…) 
} 
Page({ 
onReady(res) { 
this. videoContext = wx. createVideoContext( 'myVideo') 
}, 
inputValue: 'v 
data: { 


text: ' 第 1s 出 现 的 弹 幕 '， 
color: '#ff0000', 
time: 1 
}, 
{ 
text: ' 第 3s 出 现 的 弹 幕 '， 
color: '#ff00ff", 
time: 3 
}] 
}, 
bindInputBlur(e) { 
this. inputValue = e.detail. value 
}, 
bindSendDanmu( ) { 
this. videoContext. sendDanmu( { 
text: this. inputValue, 
color: getRandomColor() 
}) 
’ 
audioPlay: function() { 
this. videoContext. play( ) 
1 
audioPause: function() { 
this. videoContext. pause( ) 
audiol4: function() { 
this. videoContext. seek(120) 
1 
audioStart: function() { 
this. videoContext. seek(0) 


}) 


【代码 讲解 】 本 例 先 获取 VideoContext 对 象 ,然后 通过 this. videoContext. sendDanmu()、 
this.videoContext.play ( ) this. videoContext. pause ( )、this. videoContext. seek (120) 和 this 
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.videoContext.seek(0) 等 接口 实现 了 发 送 弹 幕 、 播 放 、 和 暂停 .定位 和 回 滚 操作 。 
2. wx.chooseVideo( ) 接 口 


wx.chooseVideo() 接 口 是 在 本 地 手机 选择 或 者 拍摄 视频 ,选中 的 视频 可 以 用 来 显示 ,也 
可 以 用 来 上 传 到 网 络 。wx.chooseVideo() 接 口 参数 如 表 8.11 所 示 。 
表 8.11 wx.chooseVideo( ) 接 口 参 数 表 
属 性 类 型 必 填 说 明 
sourceType Array.< string > 否 | 视频 选择 的 来 源 
compressed boolean 否 | 是 否 压缩 所 选择 的 视频 文件 
maxDuration number 否 | 视频 最 长 拍摄 时 间 , 单 位 : s 
默认 拉 起 的 是 前 置 或 者 后 置 摄像 头 。 部 分 Android 手 
camera string 否 Si 
机 下 由 于 系统 ROM 不 支持 ,无 法 生效 
success function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 
complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


[ 贺 8-9 本 例 使 用 wx.chooseVideo( ) 接 口 选中 手机 上 的 某 一 视频 ， 
然后 对 选中 的 视频 进行 播放 操作 ,程序 运行 效果 如 图 8.9 一 图 8.11 所 示 。 - 
图 8.10 是 小 程序 正在 压缩 选中 的 视频 ; 图 8.11 是 成 功 加 载 选中 的 视频 的 日 就: 
效果 。 视频 讲解 


压缩 中 ， 请 稍 候 … 


图 8.9 视频 上 传 和 播放 1 图 8.10 视频 上 传 和 播放 2 
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上 传 视频 


播放 


图 8.11 视频 上 传 和 播放 3 
pages/chooseVideo/chooseVideo.wxml 的 代码 如 下 : 


<view class = "section tc"> 

<video id= "myVideo" src="{{src}}" danmu— list="{{danmuList}}" enable— danmu 
danmu - btn controls ></video> 

</view> 

< button type = "primary" bindtap = "uploadvideo"> 上 传 视频 </button > 

< button type = "primary” bindtap = "audioPlay"> 播 放 </button > 


pages/chooseVideo/chooseVideo.wxml 的 代码 如 下 : 


Page({ 
onReady(res) { 
}, 
inputValue: '', 
data: { 
src: 'http://wxsnsdy. tc. qq. com/105/20210/snsdyvideodownload?filekey = 
30280201010421301£0201690402534804102ca905ce620b1241b726bc41dcff44e002040128 
82540400gbizid = 1023&hy = SH&fileparam = 302c020101042530230204136ffd93020457e3c4 
ff02024ef202031e8d7f02030f42400204045a320a0201000400' 
}, 
uploadvideo: function() { 
var that = this; 


wx. chooseVideo({ 
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sourceType: [ 'album'，'camera'],， 
maxDuration: 60, 
camera: "back'， 
success(res) { 
that. setData({ 
src: res. tempFilePath 
}) 
console. log(that. data. src) 
} 
}) 
}, 
audioPlay: function() { 
this. videoContext = wx.createVideoContext('myVideo') 
this. videoContext. play( ) 
} 
}) 


【代码 讲解 】 sourceType: ['album','camera'] 说 明 可 以 选择 手机 上 的 视频 ,也 可 以 即 
时 拍摄 视频 。 在 选择 了 新 视频 之 后 采用 wx.createVideoContext() 来 获取 VideoContext 对 
象 ,使 用 this.videoContext.play() 来 播放 选择 的 视频 。 

3. wx.saveVideoToPhotosAlbum(Object object) 接口 

wx.saveVideoToPhotosAlbum(Object object) 保 存 视频 到 系统 相册 ,支持 MP4 视频 格 
式 , 详 细 属性 如 表 8.12 所 示 。 


表 8.12 ”wx.saveVideoToPhotosAlbum( ) 接 口 属 性 表 


属 蒜 类 型 | 必 填 说 明 

filePath string 是 | 视频 文件 路 径 , 可 以 是 临时 文件 路 径 , 也 可 以 是 永久 文件 路 径 
success function 否 | 接口 调用 成 功 的 回调 函数 

fail function 否 | 接口 调用 失败 的 回调 函数 

complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


加 8-10 本 例 使 用 wx.saveVideoToPhotosAlbum() 接 口 保存 一 个 视 


频 到 手机 视频 库 中 ,程序 运行 效果 如 图 8.12 所 示 。 
pages/savaVideo/savaVideo.wxml 的 代码 如 下 : 


< view class = "section tc"> 
<video id= "myVideo" src="{{src}}" danmu— list ="{{danmuList}}" enable— danmu danmu 
—btn controls></video> 

</view> 


< button type = "primary”bindtap = "save"> 保 存 视 频 </button> 
pages/savaVideo/savaVideo.js 的 代码 如 下 : 


Page({ 
inputValue: '', 


data: { 
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wxid_6efo5zatas2v21 的 接口 测试 号 . 


保存 图 片 或 视频 到 你 的 相册 


图 8.12 保存 视频 到 手机 视频 库 


src: 'http://wxsnsdy. tc. qq. com/105/20210/snsdyvideodownload?filekey = 
30280201010421301£0201690402534804102ca905ce620b1241b726bc41dcff44e002040128 
82540400&bizid = 1023&hy = SH&fileparam = 302c020101042530230204136ffd93020457e3c4 
ff02024ef202031e8d7f02030f42400204045a320a0201000400' 
}, 
save: function() { 
var that = this; 
wx. downloadFile( { 
url: 'http://wxsnsdy. tc. qq. com/105/20210/snsdyvideodownload?filekey = 
30280201010421301£0201690402534804102ca905ce620b1241b726bc41dcff44e002040128 
82540400&bizid = 1023&hy = SH&fileparam = 302c020101042530230204136ffd93020457e3c4 
ff02024ef202031e8d7f02030f42400204045a320a0201000400'， // 仅 为 示例 ,并 非 真 实 的 资源 
success: function(res) { 
if (res. statusCode == = 200) { 
wx. saveVideoToPhotosAlbun( { 
filePath: res. tempFilePath, 
success(res) { 
wx. showToast ({ 
title: ' 保 存 视 频 成 功 !'， 
}) 
}, 
fail(res) { 
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wx. showToast ({ 
title: ' 保 存 图 片 失败 !'， 


8.4 录音 .音频 播放 控制 以 及 背景 音乐 


与 QQ 相 比 , 微 信 拥有 更 加 强大 的 语音 功能 。 小 程序 继承 了 微 信 强大 的 语音 处 理 功能 ， 
提供 了 录音 .音频 播 忙 放 制 和 背景 音乐 等 功能 ,它们 的 功能 不 相同 ,但 有 相似 性 ,本 节 将 把 这 
三 类 接口 安排 在 一 起 进行 介绍 。 


8.4.1 录音 


小 程序 提供 了 wx.startRecord(Object object) (开始 录音 )、wx.stopRecord()( 停 止 录 

音 ) 和 RecorderManager( 录 音 管理 器 ) 等 接口 对 录音 功能 进行 控制 。 因 为 RecorderManager 

音 管理 器 包含 前 两 个 接口 的 功能 ,所 以 本 节 只 对 RecorderManager 录音 管理 器 进行 讲解 。 
它 的 常用 函数 如 表 8.13 所 示 。 


表 8.13 RecorderManager 常用 函数 表 


接 口 功能 和 用 途 

RecorderManager.resume() 继续 录音 

RecorderManager. stop() 停止 录音 

RecorderManager.onStart(function callback) 监听 录音 开始 事件 
RecorderManager.onResume( function callback) 监听 录音 继续 事件 
RecorderManager.onPause(function callback) 监听 录音 暂停 事件 
RecorderManager.onStop(function callback) 监听 录音 结束 事件 
RecorderManager.onFrameRecorded(function callback) 和 汪清 汪 相生 的 < EN 人 

设置 了 frameSize, 则 会 回调 此 事件 

RecorderManager.onError(function callback) 监听 录音 错误 事件 


注意 : 在 使 用 录音 接口 时 , 需 先 授权 开放 录音 功能 。 
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[ 圆 s-11 本 例 使 用 RecorderManager 录音 管理 器 实现 录音 、 暂 停 . 继 续 录 音 、 
停止 录音 和 播放 录音 功能 。 图 8.13 是 授权 开放 录音 功能 界面 ; 图 8.14 是 开始 录音 


的 界面 ; 图 8.15 是 控制 台 打 印 的 信息 。 


微 信 授 权 


wxid_6efo5zatas2v21 的 接口 测 
试 号 申请 获得 以 下 权限 


. 


图 8.13 录音 授权 图 8.14 


RR Console Sources Network Security 


(中 国标 
司 , 芝 


格式 不 同色 


MediaError 


19864 


图 8.15 控制 台 信息 
pages/recorderManager/recorderManager.wxml 的 代码 如 下 : 


音 </button > 
音 </button > 


< button bindtap = "start" class = 'btn'> 开 始 
< button bindtap = "pause" class = 'btn'> 暂 
< button bindtal 音 </button> 
< button bindtap = "stop" class = 'btn'> 停 止 录音 </button > 
< button bindtap = "play”class = 'btn'> 播 放 录 音 </button > 


resume" class= 'bt 
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pages/recorderManager/recorderManager.js 的 代码 如 下 : 


const recorderManager = wx.getRecorderManager() 
const innerAudioContext = wx.createInnerAudioContext() 


onLoad: function() { 
}, 
start: function() { // 开 始 录音 的 时 候 
var that = this 
const options = { 


duration: 10000, // 指 定 录音 的 时 长 ,单位 为 ms 
sampleRate: 16000, // 采 样 率 
numberOfChannels: 1, // 录 音 通道 数 
encodeBitRate: 96000, // 编 码 码 率 
format: ‘mp3', // 音 频 格式 , 有效 值 为 aac/mp3 
frameSize: 50, // 指 定 帧 大 小 ,单位 为 KB 
} 
wx. authorize({ // 授 权 接 口 


scope: 'scope. record', 
success() { 
console. log( "录音 授权 成 功 "); 
that. setData( { 
status: 2, // 第 一 次 成 功 授权 后 状态 切换 为 2 
}) 
recorderManager. start(options); 
recorderManager. onStart(() =>{ 
console. log( 'recorder start') 
}); 
recorderManager. onError((res) => { // 错 误 回调 
console. log(res); 
}) 
}, 
fail() { 
console. log(" 第 一 次 录音 授权 失败 "); 
wx. showModal ({ 
title: ' 提 示 '， 
content: ' 您 未 授权 录音 ,功能 将 无 法 使 用 '， 
showCancel: true, 
confirmText: "授权 "， 
confirmColor: "#52a2d8", 
success: function(res) { 
if (res.confirm) { // 确 认 则 打开 设置 页 面 (重点 ) 
wx. openSetting({ 
success: (res) =>1{ 
console. log(res. authSetting); 
if (!res.authSetting[ 'scope.record']) { 
// 未 设置 录音 授权 
console. log(" 未 设置 录音 授权 "); 
wx. showModal ({ 
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title: ' 提 示 '， 
content: ' 您 未 授权 录音 ,功能 将 无 法 使 用 '， 
showCancel: false, 
success: function(res) { 
}, 
}) 
} else{ 
console. log( "设置 录音 授权 成 功 "); // 第 二 次 才 成 功 授权 
that. setData({ 
status: 2, 
}) 
recorderManager. start (options); 
recorderManager. onStart(() =>{ 
console. log( 'recorder start') 
]); 
// 错 误 回调 
recorderManager. onError((res) =>{ 
console. log(res); 
}) 
} 
}, 
fail: function() { 
console. log(" 授 权 设置 录音 失败 "); 
} 
}) 
} else if (res.cancel) { 
console. log("cancel"); 
} 
}, 
fail: function() { 
console. log( "openfail"); 
} 
}) 
} 
}) 
}, 
pause: function() { // 暂 停 录 音 
recorderManager. pause( ); 
recorderManager. onPause( (res) =>{ 
console. log( ' 暂 停 录音 ') 
}) 
}, 
resume: function() { // 继 续 录 音 
recorderManager. resume( ); 
recorderManager. onStart(() =>{ 
console. log( ' 重 新 开始 录音 ') 
]) 
// 错 误 回 调 
recorderManager. onError((res) =>{ 
console. log(res); 


]) 
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}, 
stop: function() { // 停 止 录 音 
recorderManager. stop( ); 
recorderManager. onStop( (res) =>{ 
this. tempFilePath = res.tempFilePath; 
console. log( ' 停 止 录音 '，res. tempFilePath) 
const { tempFilePath } = res 
}) 
}, 
play: function() { // 播 放声 音 
innerAudioContext. autoplay = true 
innerAudioContext. src = this. tempFilePath, 
innerAudioContext. onPlay(() =>{ 
console. log( ' 开 始 播 放 ') 
}) 
innerAudioContext. onError((res) =>{ 
console. log(res. errMsg) 


console. log(res. errCode) 


【代码 讲解 】 本 例 通过 recorderManager.wxml 中 的 5 个 按钮 来 调用 RecorderManager 录 
音 管理 器 的 录音 、 暂 停 ,继续 录音 停止 录音 和 播放 录音 功能 。 在 录制 好 音频 之 后 也 可 以 上 
传 到 服务 器 ,本 例 只 是 把 录制 好 的 音频 存放 在 手机 临时 目录 ,然后 用 来 播放 。 


8.4.2 音频 播放 控制 


小 程序 提供 了 wxstopVoice() .wx setInnerAudioOption() ,wx playVoice() .wx.pauseVoice() wx. 
getAvailableAudioSources()、wx.createInnerAudioContex( ) 和 wx.createAudioContext() 等 接口 
对 音频 进行 操作 。 其 中 ,wx.createInnerAudioContex() 接 口 和 wx.createAudioContext() 接 口 包 
含 前 面 几 个 接口 的 功能 。wx.createAudioContext() 接 口 是 以 组 件 < audio > 为 基础 的 操作 ,本 
节 讲 解 wx.createAudioContext() 接 口 ,而 wx.createInnerAudioContext() 接 口 将 在 8.6 节 
中 以 实 训 项 目的 形式 介绍 。 

AudioContext 实例 对 象 可 通过 wx.createAudioContext() 接 口 获取 , 它 通 过 id 跟 一 个 
<audio > 组 件 绑 定 ,操作 对 应 的 < audio > 组 件 。AudioContext 对 象 常 用 的 函数 如 表 8.14 
所 示 。 


表 8.14 AudioContext 对 象 常用 函数 


接 口 功能 和 用 途 
AudioContext.setSrc(string src) 设置 音频 地 址 
AudioContext.play() 播放 音频 
AudioContext.pause() 暂停 音频 
AudioContext.seek(number position) 跳 转 到 指定 位 置 
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[ 国 8-12 ”本 例 首先 通过 wx.createAudioContext() 接 口 获取 AudioContext 实例 ， 
播放 和 和 暂停 功能 ,最 后 用 slider 组 件 来 定位 播放 位 置 ,程序 运行 效果 如 图 8.16 所 示 。 


后 调用 


AudioContext 


视频 讲解 


此 时 此 刻 


图 8.16 AudioContext 播放 器 实例 


pages/AudioContext/AudioContext.wxml 的 代码 如 下 : 


<audio poster = "{{poster}}" name = "{{name}}" author = "{{author}}" src="{{src}}" id = 
"myAudio" controls loop ></audio > 

< slider bindchange = 'change' min = "0" max = "160" value = "{{time}}" color = "blue" selected - 
color = "red" show- value = "true"></slider > 

< button class = 'bl'type= "primary" size= "mini" bindtap = "audioPlay"> 播 放 </button > 


< button class = 'bl' type = "primary" size= "mini" bindtap = "audioPause"> 和 暂停 </button > 
pages/ AudioContext/AudioContext.wxml 的 代码 如 下 : 


Page({ 
onReady: function(e) { 
// 使 用 wx. createAudioContext 获取 audio 上 下 文 context 
this. audioCtx = wx.createAudioContext('myAudio') }, 
data: { 
time:0, 
poster: 'http://y. gtimg. cn/music/photo_new/T002R300x300M000003rsKF44 
GyaSk. jpg?max_age = 2592000', 
name: ' 此 时 此 刻 '，author: ' 许 痢 '， 
src: 'http://aqqmusic. tc. qq. com/amobile. music. tc. qq. com/C400001VfvsJ21x 
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Fqb. m4a?guid = 7755942796&vkey = DCE16865FD7290841AD5C3E90461ADA3FAOECA135E00058 

61E0A1D406642332094B84AC22FCDAF9A70C8A2EC729EECB010AE0E585F8CFB70&uin = 0&from 

tag= 38', 

}, 

audioPlay: function() { 
this. audioCtx.play() 

}, 

audioPause: function() { 
this. audioCtx. pause( ) 

}, 

audiol4: function() { 
this. audioCtx. seek(0) 

}, 

change: function(e) { 
console. log(e) 
this. audioCtx. seek(e. detail. value) 

} 

}) 

【代码 讲解 】 本 例 调用 了 AudioContext 对 象 的 AudioContext.play()、AudioContext 
.pause() 和 AudioContext. seek() 3 个 接口 ,其 中 , AudioContext. seek() 是 通过 AudioContext 
-wxml 中 的 slider 组 件 的 拉动 来 定位 播放 的 时 间 位 置 。 滑 块 条 (slider) 拉 动 的 值 被 传递 到 了 
e.detail.value 中 ,this.audioCtx.seek(e.detail.value) 就 定位 到 滑 块 条 拉动 的 值 对 应 的 播放 时 
间 处 进行 播放 。 


8.4.3 背景 音乐 


小 程序 提供 了 wx.stopBackgroundAudio ( )、wx. seekBackgroundAudio ( ) 、wx. play- 
BackgroundAudio( )、 wx. pauseBackgroundAudio ( ) 、wx. onBackgroundAudioStop ( ) 、wx 
.onBackgroundAudioPlay()、 wx. onBackgroundAudioPause ( ) wx. getBackgroundAudio- 
PlayerState()wx.getBackgroundAudioManager() 和 BackgroundAudioManager() 等 接口 对 
背景 音乐 进行 操作 .从 接口 的 数量 可 以 看 出 小 程序 对 背景 音乐 功能 的 重视 程度 。 

BackgroundAudioManager 实例 对 象 是 通过 wx.getBackgroundAudioManager() 接 口 
获取 的 , 它 是 小 程序 官方 发 布 的 接口 ,功能 强大 ,包含 其 他 背景 音乐 处 理 接口 的 所 有 功能 。 
本 节 将 介绍 BackgroundAudioManager 实例 对 象 , 它 的 常见 属性 和 功能 函数 分 别 如 表 8.15 和 
表 8.16 所 示 。 


表 8.15 ”BackgroundAudioManager 对 象 常见 属性 


接 日 功能 和 用 途 

音频 的 数据 源 (2.2.3 版 本 开始 支持 云 文件 ID) ,默认 为 空 字符 串 , 当 设置 了 新 的 
src 时 ,会 自动 开始 播放 ,目前 支持 的 格式 有 m4a、aac、mp3、wav 

number startTime 音频 开始 播放 的 位 置 .单位 : s 


string Src 
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续 表 
接 口 功能 和 用 途 


音频 标题 .用 于 原生 音频 播放 器 音频 标题 ( 必 填 ) 。 原 生 音频 播放 器 中 的 分 享 功 


nee 能 ,分 享 出 去 的 卡片 标题 也 将 使 用 该 值 
i 专辑 名 ,原生 音频 播放 器 中 的 分 享 功 能 .分享 出 去 的 卡片 简介 也 将 使 用 该 值 
Se er 歌手 名 .原生 吝 频 播放 器 中 的 分 享 功能 ,分享 出 去 的 卡片 简介 也 将 使 用 该 信 


封面 图 URL, 用 于 做 原生 音频 播放 器 背景 图 。 原 生 音 频 播放 器 中 的 分 享 功能 ， 
分 享 出 去 的 卡片 配 图 及 背景 也 将 使 用 该 图 


string coverImgUrl 


string webUrl 页 面 链接 ,原生 音频 播放 器 中 的 分 享 功能 ,分 享 出 去 的 卡片 简介 也 将 使 用 该 值 
string protocol 音频 协议 ,默认 值 为 "http' ,设置 'hls' 可 以 支持 播放 HLS 协议 的 直播 音频 
number duration 当前 音频 的 长 度 (单位 : s), 只 有 在 有 合法 src 时 返回 (只 读 ) 

number currentTime | 当前 音频 的 播放 位 置 (单位 : s) ,只 有 在 有 合法 src 时 返回 (只 读 ) 

boolean paused 当前 是 否 暂 停 或 停止 (只 读 ) 


number buffered 音频 已 缓冲 的 时 间 , 仅 保证 当前 播放 时 间 点 到 此 时 间 点 内 容 已 缓冲 (只 读 ) 


表 8.16 ”BackgroundAudioManager 对 象 常 见 功能 函数 


接 口 功能 和 用 途 
BackgroundAudioManager. play() 播放 音乐 
BackgroundAudioManager.pause() 暂停 音乐 
BackgroundAudioManager.stop() 停止 音乐 
BackgroundAudioManager.onCanplay(function callback) a el tte i 
BackgroundAudioManager.seek(number currentTime) 跳 转 到 指定 位 置 
BackgroundAudioManager.onWaiting(function callback) 下 音频 加 载 中 带 件 。 当 音 频 因 为 数 

据 不 足 , 需 要 停 下 来 加 载 时 会 触发 

BackgroundAudioManager.onError(function callback) 监听 背景 音频 播放 错误 事件 
BackgroundAudioManager.onPlay(function callback) 监听 背景 音频 播放 事件 
BackgroundAudioManager.onPause( function callback) 监听 背景 音频 暂停 事件 
BackgroundAudioManager.onSeeking(function callback) 监听 背景 音频 开始 跳 转 操作 事件 
BackgroundAudioManager.onEnded( function callback) 监听 背景 音频 自然 播放 结束 事件 
BackgroundAudioManager.onSeeked(function callback) 监听 背景 音频 完成 跳 转 操作 事件 
BackgroundAudioManager.onStop(function callback) 监听 背景 音频 停止 事件 


监听 背景 音频 播放 进度 更 新 事件 ,只 有 


BackgroundAudioM .onTimeUpdate( function callback) ee 、 
cKgroun udioManager.on limeUpdate( iunction ca ac, 小 程序 在 前 台 时 会 回调 


监听 用 户 在 系统 音乐 播放 面板 点 击 下 


BackgroundAudioManager.onNext(function callback) 一 昌 事 件 ( 仅 iOS) 


监听 用 户 在 系统 音乐 播放 面板 点 击 上 


BackgroundAudioManager.onPrev(function callback) 一 曲 事件 ( 仅 iOS) 
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[ 贺 8-13 本 例 在 古诗 (将 进 酒 ) 页 面 中 添加 朗读 古诗 的 背景 音乐 ,实现 开始 朗读 ,暂停 
朗读 和 继续 朗读 3 个 功能 。 程 序 是 通过 backgroundAudioManager 实例 调用 播放 接口 和 和 暂 
停 接口 来 实现 上 述 功能 ,程序 运行 效果 如 图 8.17 所 示 。 


eee0e WeChats 


Backgrour 


将 进 酒 
唐 代 : 李白 


不 见 ， 黄 河 之 水 天 上 来 ， 奔 流 到 ) 海 不 复 回 。 
姑 不 见 ， 高 堂 明镜 幕 白 发 ， 朝 如 青丝 车 成 雪 。 
人 生得 意 须 尽 欢 ， 莫 使 多 检 空 对 月 。 

天 生 我 材 必 有 用 ,千金 散 尽 还 复 来 。 

京 羊 宰 牛 且 为 乐 ， 会 须 一 饮 三 百 杯 。 

崔 夫 子 ， 丹 丘 生 ， 将 进 酒 ， 杯 莫 停 。 
与 君 歌 一 曲 ， 请 君 为 我 倾 耳 听 。 
钟 鼓 局 玉 不 足 贵 ， 但 愿 长 醉 不 复 醒 。 
古来 圣贤 皆 寂 宣 ， 惟 有 饮 者 留 其 名 。 
陈 王 昔 时 宣 平 乐 ， 斗 酒 十 干 次 欢 让 。 
主人 何 为 言 少 钱 ， 径 须 沽 取 对 君 酌 。 

五 花 马 ， 干 金 袭 ， 
呼 儿 将 出 换 美酒 ， 与 尔 同 销 万 古 愁 。 


图 8.17 ”backgroundAudioManager 播放 器 实例 


pages/backgroundAudioManager/backgroundAudioManager.wxml 的 代码 如 下 : 


<view class = 'zong'> 

< view > 将 进 酒 </view> 

< view class = "zz"> 唐 代 : 李白 </view> 

< view class = "content"> 

< view > 君 不 见 , 黄河 之 水 天 上 来 , 奔流 到 海 不 复 回 。</view> 
< view> 君 不 见 , 高 堂 明镜 悲 白 发 , 朝 如 青丝 车 成 雪 。</view> 
< view > 人 生得 意 须 尽 欢 , 莫 使 金 楼 空 对 月 。</view> 

<view > 天 生 我 材 必 有 用 ,千金 散 尽 还 复 来 。</view> 
<view> 启 羊 宰 牛 且 为 乐 ,会 须 一 饮 三 百 杯 。</view> 

< view > 岑 夫子 , 丹 丘 生 , 将 进 酒 , 杯 莫 停 。</view> 

< view > 与 君 歌 一 曲 , 请 君 为 我 便 耳 听 。</view> 

< view > 钟 鼓 蚀 玉 不 足 贵 ,但 愿 长 醉 不 复 醒 。</view> 

< view > 古来 圣贤 皆 寂 寞 ,惟有 饮 者 留 其 名 。</view> 

< view > 陈 王 昔 时 宴 平 乐 , 斗 酒 十 千 盗 欢 读 。</view> 

<view > 主人 何 为 言 少 钱 , 径 须 沽 取 对 君 酌 。</view> 

< view > 五 花 马 ,千金 琢 ,</view> 

< view > 呼 儿 将 出 换 美 酒 ,与 尔 同 销 万 古 悉 。</view> 
</view> 

</view> 


< view class = "bg"> 
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< view class = "bgl" bindtap = 'play> 听 朗读 </view><view class = "bg2" bindtap = 'pause'> 暂 停 朗 
读 </view>< view class = "bg3" bindtap = 'continue'> 继 续 朗 读 </view> 
</view> 


pages/backgroundAudioManager/backgroundAudioManager.js 的 代码 如 下 : 


const backgroundAudioManager = wx.getBackgroundAudioManager() 
backgroundAudioManager.title = ' 将 进 酒 ' 
backgroundAudioManager. epname = ' 将 进 酒 ' 
backgroundAudioManager. singer = ' 李 和 白 ' 
Page({ 
/xxx 页 面 的 初始 数据 * / 
data: { 
}, 
onShow: function() { 
}, 
play:function(){ 
// 设 置 了 src 之 后 会 自动 播放 
backgroundAudioManager. src = 
"http://isure. stream. qqmusic. qq. com/C4000013xY8G21Iong.m4a?guid = 7755942796&v 
key = 7606A71BA1B1FE25153B1739773F3508E140C9241416E3F491BF664BC4293AF618B0876E 
7B85B160A61B79E54187A0D5B5F288A386615D57&uin = 0&fromtag = 66" 
}, 


pause:function(){ 
backgroundAudioManager. pause( ); 


}, 

continue:function( ){ 
backgroundAudioManager. play(); 

} 

}) 

【代码 讲解 】 本 例 先 通过 wx.getBackgroundAudioManager() 获 取 backgroundAudioManager 
实例 ,然后 调用 了 backgroundAudioManager. src、 backgroundAudioManager. pause( ) 和 
backgroundAudioManager.play() 三 个 接口 。 需 要 注意 backgroundAudioManager.src 设置 了 背 
景 音乐 的 地 址 ,因为 背景 音乐 是 会 自动 播放 的 ,所 以 没有 用 backgroundAudioManager.play() 就 
实现 了 第 一 次 播放 功能 。 


85 设备 操作 


因为 小 程序 应 用 经 常会 和 手机 硬件 打交道 ,所 以 小 程序 提供 了 众多 设备 操作 接口 ,本 节 
将 介绍 获取 系统 信息 、 网 络 环 境 、 电 量 等 接口 。 


8.5.1 获取 系统 信息 


小 程序 开发 的 过 程 中 可 能 需要 获取 用 户 的 手机 信息 ,例如 可 能 需要 获取 用 户 手 机 的 高 
度 和 宽度 来 设置 一 个 页 面 的 布局 ,或 者 需要 获取 所 有 用 户 使 用 的 手机 型 号 来 判断 用 户 的 人 
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群 画 像 。 小 程序 提供 了 wx.getSystemInfoSync() 和 wx.getSystemInfo() 两 个 接口 来 获取 系 
统 信息 ,前 者 是 同步 接口 ,后 者 是 异步 接口 ,二 者 没有 本 质 区 别 。 异 步 的 含义 是 接口 执行 上 


需要 比较 长 的 时 间 才 返 


S| 


所 示 。 


结果 ,本 节 只 介绍 异步 接口 wx.getSystemInfo() ,其 属性 如 表 8.17 


表 8.17 wx.getSystemInfo() 接 口 属性 表 


接 口 类 型 功能 和 用 途 
brand string 设备 品牌 
model string 设备 型 号 
pixelRatio number 设备 像素 比 
screenWidth ee 屏幕 宽度 ,单位 px 
screenHeight number 屏幕 高 度 , 单 位 px 
windowWidth number 可 使 用 窗口 宽度 ,单位 px 
window Height number 可 使 用 窗口 高 度 ,单位 px 
statusBarHeight number 状态 栏 的 高 度 , 单 位 px 
language string 微 信 设 置 的 语言 
version string i 版 本 号 
system string 操作 系统 及 版 本 
platform string 客户 端 平 台 


圆 5-14 本 例 使 用 wx.getSystemInfo() 获 取 系 统 的 手机 型 号 、 像 素 比 . 手 机 窗口 宽 
度 、 手 机 窗口 高 度 、 微 信 语 言 和 微 信 版 本 号 等 信息 ,程序 运行 效果 如 图 8.18 所 示 。 


获取 系统 信息 
手机 型 号 :iPhone 5 
设备 像素 比 :2 


微 信 

微 信 版 本 号 :6.6.3 

操作 系统 版 本 :iOS 10.0.1 
客户 端 平台 :devtools 


视频 讲解 


图 8.18 ”getSystemlInfo 获取 系统 信息 
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pages/getSystemInfo/getSystemJInfo.wxml 代码 如 下 : 


< view class = "container"> 
< button bindtap = 'getInfo'> 获 取 系 统 信息 </button > 
< View wx:if ="{{model != ''}}"> 
<view> 手 机 型 号 :{ {model}}</view> 
< view > 设备 像素 比 :{{pixelRatio}}</view> 
< view > 窗口 宽度 :{ {windowWidth} }</view> 
< view > 窗口 高 度 :{{windowHeight}}</view> 
< view > 微 信 设 置 的 语言 :{{language}}</view> 
< view > 微 信 版 本 号 :{{version}}</view> 
< view > 操作 系统 版 本 :{{system}}</view> 
< view> 客 户 端 平台 :{{platform}}</view> 
</view> 
</view> 


pages/getSystemInfo/getSystemInfo.js 代码 如 下 : 


const app = getApp() 
Page({ 
data: { 
model: '', 
pixelRatio: '', 
windowWidth: '', 


windowHeight: '', 


language: 
version: 


system: '', 
platform: 
}, 
onLoad: function() { 
}, 
getInfo: function() { 
var that = this; 
wx. getSystemInfo( { 
success: function(res) { 
that. setData( { 
model: res. model, 
pixelRatio: res. pixelRatio, 
windowWidth: res.windowWidth, 
windowHeight: res.windowHeight, 
language: res. language, 
version: res. version, 
system: res. system, 
platform: res.platform 
}) 
}, 
fail: function(res) { 
}, 
complete: function(res) { 


bs 


304 


}) 
} 
}) 


【代码 讲解 】 
来 获取 系统 信息 ,两 个 接口 功能 类 似 , 


获取 的 信息 全 部 被 封装 在 res 对 象 中 。 


8.5.2 ”网 络 环境 


在 一 些 需 要 消耗 流量 的 应 用 场景 中 ,小 程 
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小 程序 提供 了 wx.getSystemInfoSync() 和 wx.getSystemInfo() 两 个 接口 
选择 其 一 即 可 。 本 例 使 用 了 wx.getSystemInfo() , 它 


序 需 要 先 获 取 用 户 的 网 络 环境 ,根据 不 同 的 网 


络 环境 做 出 不 同 的 处 理 。wx.getNetworkType(0) 接 口 的 属性 如 表 8.18 所 示 。 


属 性 


表 8.18 wx.getNetworkType() 接 口 属 性 表 


类 型 


说 


Success 


function 


接口 调用 成 功 的 回调 函数 


fail 


function 


接口 调用 失败 的 回调 函数 


complete 


function 


接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


[ 贺 8-15 本 例 在 例 8-13 的 基础 上 加 入 网 络 环境 判断 , 当 处 于 WiFi 条 件 下 就 播放 背景 


音乐 ,在 非 WiFi 条 件 下 弹出 


-个 窗口 让 用 户 决 定 是 否 继续 ,程序 运行 效果 如 图 8.19 所 示 。 


将 进 酒 
唐 代 : 李白 


丑 不 见 ， 黄 河 之 水 天 上 来 ， 奔 流 到 海 不 复 回 。 


提示 
您 处 于 非 Wifi 环境 ， 播 放 音乐 将 
消耗 您 的 流量 ， 继 续 播放 吗 ? 
取消 确定 
五 花 马 ， 千 金 硝 ， 
呼 儿 将 出 换 美 酒 ， 与 尔 同 销 万 古 愁 。 
听 朗 读 暂停 朗读 继续 朗读 


图 8.19 getNetworkType 获取 网 络 条 件 


视频 讲解 
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pages/getNetworkType/getNetworkType.js 代码 如 下 : 


const backgroundAudioManager = wx.getBackgroundAudioManager() 
backgroundAudioManager.title = ' 将 进 酒 ' 
backgroundAudioManager. epname = ' 将 进 酒 ' 

,李白 ， 


I 


backgroundAudioManager. singer 
Page({ 
/xxx 页 面 的 初始 数据 * / 
data: {src:'http://isure. stream. qqmusic. qq. com/C4000013xY8G21Iong. m4a 
?guid= 7755942796&vkey = 7606A71BA1B1FE25153B1739773F3508E140C9241416E3F491BF66 
4BC4293AF618B0876E7B85B160A61B79E54187A0D5B5F288A386615D57&uin = 0&fromtag = 66'}， 
onShow: function() { 
}, 
Play:function(){ 
var that = this 
wx. getNetworkType( { 
success(res) { 
Const networkType = res.networkType 
console. log(networkType) 
if(networkType == "WiFi") // 判 断 是 不 是 WiFi 环境 
{ 
backgroundAudioManager. src = that. data. src 
} 
elsel{ 
Wx. ShowModal({ 
title: ' 提 示 '， 
content: ' 您 处 于 非 WiFi 环境 ,播放 音乐 将 消耗 您 的 流量 ,继续 播放 吗 ?'， 
success(res) { 
if(res.confirm) { 
console. 1og( ' 用 户 点 击 确 定 ') // 设 置 了 src 之 后 会 自动 播放 
backgroundAudioManager. src = that. data. src 
} else if (res.cancel) { 


console. log( ' 用 户 点 击 取消 ') 


}, 

pause: function( ){ 
backgroundAudioManager. pause( ); 

}, 

continue:function( ){ 
backgroundAudioManager. play( ); 

} 

}) 


【代码 讲解 】 本 例 和 例 8-13 使 用 的 是 同一 个 wxml 文件 ,js 文件 中 使 用 wx 
.getNetworkType 获取 用 户 网 络 环境 , 当 处 于 非 WiFi 环境 时 程序 调用 wx.showModal() 弹 
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窗 让 用 户 决定 是 否 继续 播放 背景 音乐 。 


8.5.3 电量 


应 用 程序 有 时 候 需 要 像 检测 网 络 环境 一 样 检测 手机 的 电量 情况 ,例如 在 播放 视频 的 时 
候 , 检 测 到 电量 不 足 则 让 屏幕 进入 省 电 模 式 或 者 直接 提示 用 户 充电 。 在 小 游戏 开发 中 
wx.getSystemJInfo() 接 口 的 回调 函数 success 的 参数 res 中 ,res.battery 是 代表 电量 的 ,但 是 
小 程序 中 的 wx.getSystemInfo() 接 口 的 回调 函数 success 没有 res.battery 属性 ,小 程序 提 
供 的 接口 是 wx.getBatteryInfo() 接 口 和 wx.getBatteryInfoSync( ) 接 口 。wx.getBatteryInfo( ) 接 
口 除 了 有 电量 值 level, 还 有 isCharging 这 个 属性 ,所 以 wx.getBatteryInfo() 接 口 相 对 来 说 
更 专业 。wx.getBatteryInfoSync() 接 口 是 wx.getBatteryInfo() 接 口 的 同步 版 本 ,同步 和 异 
步 接口 在 电量 检测 方面 差别 不 大 ,另外 ,wx.getBatteryInfoSync() 接 口 在 i0S 上 是 不 可 用 
的 。 本 节 介 绍 wx.getBatteryInfo() 接 口 , 属 性 如 表 8.19 所 示 。 


表 8.19 wx.getBatteryInfo() 接 口 属性 表 


属 性 类 型 说 明 
level string 设备 电量 ,范围 为 1 一 100 
isCharging boolean 是 否 正在 充电 中 


[ 贺 s-16 木 例 通过 wx.getBatteryInfo() 接 口 获取 手机 电量 和 充电 状态 ,并 打印 电量 
水 平和 充电 状态 ,程序 运行 效果 如 图 8.20 所 示 。 


视频 讲解 
图 8.20 手机 电量 和 充电 状态 | 


pages/getBatteryInfo/getBatteryInfo.wxml 代码 如 下 : 


< view> 你 的 电量 是 {{level}} % </view> 
< view> 你 的 充电 状态 是 {{isCharging}}</view> 


pages/ getBatteryInfo/getBatteryInfo.js 代码 如 下 : 


Page({ 
data: { 
level:100, 
isCharging:true 
}, 
onReady(res) { 
var that = this 
wx. getBatteryInfo( { 
success(res) { 
console. log( ' 电 量 : ,，res. level) 
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console. 1og( ' 是 否 正 在 充电 : ',，res. isCharging) 


that. setData({ 
level:res. level, 
isCharging: res. isCharging 
}) 
} 
}) 
}, 
onShow(e){ 
} 
}) 


【代码 讲解 】 wx.getBatteryInfo() 获 取 的 电量 level 是 不 带 百分比 的 1 一 100 的 整数 ， 
如 果 需 要 带 上 百分比 显示 电量 ,就 需要 程序 另外 补 上 。 


乐 播放 器 案例 


8.6” 实 训 项 目 一 一 音 


(1) 播放 和 暂停 功能 之 间 的 切换 。 
(2 上 一 首 和 下 一 间 。 

(3) jg 放 列 表 的 弹出 和 消失 。 
(4) 是 否 循环 播放 ,通过 按钮 
进度 条 随 着 播放 器 时 间 一 秒 一 秒 地 自动 


视频 讲解 


移动 。 

播放 器 效果 如 图 8.21 所 示 。 

在 编写 程序 之 前 ,开发 者 需要 知道 如 何 从 网 络 上 
获取 音乐 的 播放 地 址 ,以 QQ 音乐 为 例 , 用 户 在 QQ 音 
乐 网 站 上 访问 的 音乐 地 址 如 https://y.qq.com/n/ 
yqq/song/000oQ6CmlOsjPd.html, 直 接 把 这 个 地 址 
设置 为 小 程序 音乐 的 src 属性 是 不 能 正常 播放 的 。 
小 程序 需要 形 如 “http://dl. stream. qqmusic. qq. 
com/C400003KgsVz3yPsO6.m4a?guid=775594279 
6&.vkey=CE204E710F1DB40Al1BDEEE 08BD2578 
A9D1C97A57FFADOBFE941273E85C08F 1C46CD 
2CC1EAD101BD835FCOAF100D35B313220 6EDE 
31D9DD2C&uin 王 0&fromtag 一 38” 的 地 址 。 

下 面 以 歌曲 《 珊 迹 临界 天 下 》 为 例 介 绍 如 何在 

Q 音乐 网 站 上 获取 小 程序 可 以 正常 识别 的 音乐 
URL 地 址 。 

首先 访问 歌曲 (名 迹 临界 天 下 》 地 址 https://y. 

qq.com/n/yqq/song/000oQ6Cm1OsjPd. html, 然后 
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制 循 环 与 否 。 


eeeee WeChats 


createlnnerAudioContext*©* 


档 迹 临界 天 下 


图 8.21 


本 实 训 项 目 将 实现 一 个 简单 的 音乐 播放 器 ,具体 实现 以 下 功能 : 


11:51 


音乐 播放 器 
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按 下 键盘 上 的 F12 键 ,再 按 下 F5 键 ,播放 页 面 如 图 8.22 中 所 示 , 按 照 图 8.22 的 “1”*2”*3” 
的 步骤 即 可 复制 到 小 程序 可 以 识别 的 音乐 URL 地 址 。 


明日 濠 冬 
英 导 下 在 护 背 椎 之 上 
址 看 完整 歌词 > 
1 © 
| TS 
-~ 目 omne onine 
Ly © 是 | SoveasHARwith content Copy request headers bee 
这 字 -clear browser cache Copy response headers MMes Ormer 
To0m 200m ooms om Toms 1200ms 1300ms 140d 
Clear browser cookies Copy response 一 
Block request URL CopyschLend Meo 
Copy as cURL (bash) 
Block request domain 
Copy Allas cURL (cmd) 
ie tb Copy Allas cURL (bash) 
Copy allas HAR 
1/61 requests | 29 MB / 29.. Preview no 


图 8.22 ”获取 小 程序 可 识别 的 音乐 URL 地 址 


接 下 来 介绍 播放 器 的 具体 实现 ,本 实 训 项 目 使 用 的 是 InnerAudioContext 对 象 ,而 
不 是 例 8-12 中 的 AudioContext 对 象 ,前 者 的 功能 更 加 丰富 。AudioContext 对 象 是 通过 
wx. createAudioContext ( ) 接口 来 创建 的 , 而 InnerAudioContext 对 象 是 通过 wx 
.createInnerAudioContext() 接 口 来 创建 的 。InnerAudioContext 对 象 的 属性 如 表 8.20 所 
示 , 常 用 函数 如 表 8.21 所 示 。 


表 8.20 InnerAudioContext 对 象 常用 属性 


属 性 


含义 和 取 值 


string sre 


音频 资源 的 地 址 ,用 于 直接 播放 ,2.2.3 版 本 开始 支持 云 文件 ID 


number startTime 


开始 播放 的 位 置 (单位 : s) ,默认 为 0 


boolean autoplay 


是 否 自动 开始 播放 ,默认 为 false 


boolean loop 


是 否 循环 播放 ,默认 为 false 


boolean obeyMuteSwitch 


是 否 遵循 系统 静音 开关 ,默认 为 true。 当 此 参数 为 false 时 ,即使 用 户 打 开 
了 静音 开关 ,也 能 继续 发 出 声音 。 从 2.3.0 版 本 开始 此 参数 不 生效 ,使 用 
wx.setInnerAudioOption 接口 统一 设置 


number volume 


音量 ,范围 为 0 一 1, 默 认为 1 


number duration 


当前 音频 的 长 度 (单位 : s)。 只 有 在 当前 有 合法 的 src 时 返回 (只 读 ) 


number currentTime 


当前 音频 的 播放 位 置 ( 单 位 : s)。 只 有 在 当前 有 合法 的 src 时 返回 ,时 间 保 
留 小 数 点 后 6 位 (只 读 ) 


boolean paused 


是 否 暂停 (只 读 ) 


number buffered 


音频 缓冲 的 时 间 点 , 仅 保证 当前 播放 时 间 点 到 此 时 间 点 内 容 已 缓冲 (只 读 ) 
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表 8.21 InnerAudioContext 对 象 常见 函数 


函 数 


功能 和 用 途 


InnerAudioContext.play() 


播放 


InnerAudioContext.pause() 


暂停 。 暂停 后 的 音频 再 播放 会 从 暂停 处 开始 
播放 


InnerAudioContext.stop() 


停止 。 停止 后 的 音频 再 播放 会 从 头 开始 播放 


InnerAudioContext.seek(number position) 跳 转 到 指定 位 置 
InnerAudioContext.destroy() 销毁 当前 实例 
InnerAudioContext.onCanplay (function callback) a he ea 
后 面 可 以 流畅 播放 
InnerAudioContext.offCanplay(function callback) 取消 监听 音频 进入 可 以 播放 状态 的 事件 
InnerAudioContext.onPlay( function callback) 监听 音频 播放 事件 
InnerAudioContext.offPlay(function callback) 取消 监听 音频 播放 事件 
InnerAudioContext.onPause(function callback) 监听 音频 暂停 事件 
InnerAudioContext.offPause(function callback) 取消 监听 音频 暂停 事件 
InnerAudioContext.onStop(function callback) 监听 音频 停止 事件 
InnerAudioContext.offStop(function callback) 取消 监听 音频 停止 事件 


InnerAudioContext.onEnded(function callback) 


监听 音频 自然 播放 至 结束 的 事件 


InnerAudioContext.offEnded(function callback) 


取消 监听 音频 自然 播放 至 结束 的 事件 


InnerAudioContext.onTimeUpdate(function callback) 监听 音频 播放 进度 更 新 事件 
InnerAudioContext.offTimeUpdate(function callback) 取消 监听 音频 播放 进度 更 新 事件 
InnerAudioContext.onError( function callback) 监听 音频 播放 错误 事件 
InnerAudioContext.offError(function callback) 取消 监听 音频 播放 错误 事件 
InnerAudioContext.onWaiting(function callback) = tee 攻关 因为 并 据 丰 居 
InnerAudioContext.off Waiting(function callback) 取消 监听 音频 加 载 中 事件 
InnerAudioContext.onSeeking( function callback) 监听 音频 进行 跳 转 操作 的 事件 
InnerAudioContext.offSeeking (function callback) 取消 监听 音频 进行 跳 转 操 作 的 事件 
InnerAudioContext.onSeeked(function callback) 监听 音频 完成 跳 转 操作 的 事件 


InnerAudioContext.offSeeked(function callback) 


取消 监听 音频 完成 跳 转 操作 的 事件 


从 InnerAudioContext 对 象 的 属性 和 函数 表 可 以 看 出 ,InnerAudioContext 对 象 拥有 很 
多 AudioContext 对 象 没有 的 功能 。 下 面 是 项 目的 程序 部 分 。 
pages/index/createInnerAudioContext.wxml 的 代码 如 下 : 


<view class = "top"> 


< text class = "playmusicname">{ {playmusicname} }</text > 
<view class = "music - player" style="{{animation pause}}"> 


< image class = "topimg" src="./img/play.gif"></image> 


</view> 
</view> 


<slider min= "0" max= "{{duration}}" value = "{{currentTime}}" color = "red" 
selected - color = "blue" show - value = "true"></slider > 
< view class = "mid"> 
< view class = "btns pre next" bindtap = "modetap"> 
< image class = "modeimg" src = "{f{fmode.mode img[mode. index]}}"></image> 
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</view> 

< view class = "btns pre next pre" bindtap = "Preaudio"> 

< image class = "img_ pre next" src = ". /img/pre.png"></image> 
</view> 


< view class = "btns play pause" bindtap = "Playaudio"> 
< image class = "img play pause" src="{{model.mode img[model. index]}}"></image> 
</view> 
< view class = "btns pre next next" bindtap = "Nextaudio"> 
< image class = "img pre next" src = ". /img/next. png"></image> 
</view> 
<view class = "btns pre next" catchtap = "showlist"> 
< image class = "modeimg" src="./img/list.png"></image> 
</view> 
</view> 
< view bindtap = "closeList" style= "display:{{songList_show}}" class = "music_list"> 
<text class = "list li" style= "text -align:center; "> 播放 列表 
({{songList. length} } )</text > 
< block we:for = "{{songList}}"> 
< text class = "1ist lin 
style = "background - color:silver;">{{item. no}}. {{item. name} }</text > 
</block> 
</view> 


【代码 讲解 】 本 例 的 createInnerAudioContext.wxml 从 上 到 下 主要 分 为 四 部 分 : 第 一 
部 分 是 歌曲 名 字 的 显示 ; 第 二 部 分 是 一 张 滚动 的 动画 图 片 ; 第 三 部 分 是 进度 条 ; 第 四 部 分 
是 播放 器 的 5 个 按钮 。 文 件 中 < slider > 组 件 随 着 歌曲 播放 的 进度 来 修改 value 值 。 

pages/index/createInnerAudioContext.js 的 代码 如 下 : 


const innerAudioContext = wx.createInnerAudioContext(); 
innerAudioContext. loop = false 
var app = getApp() 
Page({ 
data: { 
Ee 
songName: "", 
play_pause_src: './img/play. png', 
animation_pause: 'animation 一 play- state:paused'， 
timer: null, 
touches: {}, 
mode: { 
mode_img: ['./img/shunxu. png', './img/singlemusic. png'], 
index: 0 


mode_img: ['. /img/play. png', '. /img/pause. png'], 
}, 
songList: [{ no: 1, name: " 慢 半 拍 ", url: "http://aqqmusic. tc. qq. com 


/amobile. music. tc. qq. com/C400002qpjAV21Yx81. m4a?guid = 7755942796&vkey = 761C71F 
AA22FB595EA9717ED744BAE5919879B74DF2579EB29F93BEBA1A02E5086663A948F19EA2EB11 
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B25A9595137A777D355D87747C54D&uin = 0&fromtag = 38" }, 
{no: 2, name: "木偶 人 "，ur1: "http://aqqmusic. tc. qq. com/amobile. music. tc. qq. com 
/C400003iHc0e2UIgMC. m4a?guid = 7755942796&vkey = 4AAAS588B92E9BF4FC3B3AB069854334 
9152EC7871C7139ADD967B94BB076B4018C907D389E1337884B65C54B0D30D3D07D798C913A8 
7B9CE&uin = 0&fromtag = 38"}, 
{ no: 3，name: "我 的 朋友 "，url:"http://aqqmusic. tc. qq. com/amobile. music. tc. qq. com 
/c400001nGin13Tsk4H. m4a?guid = 7755942796&vkey = BC68A40B32AC814AAF389875DBD4537 
82BDF1CEA44FA2F382E93F9A35CFAC2915C042CE485967353FD90958ED886E361C24587333F2 
E8224&uin = 0&fromtag = 38"}], 
playmusicname:" 木 偶 人 "， 
songList_ show: "none", 
duration:208, 
currentTime:0 
}, 
onLoad: function() { 
}, 
onReady: function() { 
console. log(this. data. songList[1].url) 
innerAudioContext. src = this. data. songList[1].url 
console. log(" 已 经 有 了 innerAudioContext" + innerAudioContext. duration) 
}, 
modetap: function( ){ // 播 放 模 式 的 设置 
if (innerAudioContext. loop = true) 
{ innerAudioContext. loop = false} 
else{ 
innerAudioContext. loop = true} 
var mode = this. data. mode 
mode. index++ 
if(mode. index > = 2){ 
mode. index = 0 
} 
this. setData({ 
mode:mode 
}) 
}, 
Preaudio: function() { // 前 一 首 歌 
innerAudioContext. src = this. data. songList[0].url 
innerAudioContext. play( ); 
this. setData( { 
playmusicname: " 慢 半 拍 " 
}) 
}, 
Playaudio: function() { // 播 放 当 前 歌曲 
var that = this 
var model = this. data.model 
model. index++ 
if (model. index >= 2) { 
model. index = 0 
} 
this. setData( { 
model: model 
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}) 
if (innerAudioContext. paused) { 
innerAudioContext. play( ); 
innerAudioContext. onPlay(() =>{ 
console. log( 'audioContext. paused', innerAudioContext. paused) 
}) 
innerAudioContext. onTimeUpdate(() =>{ 
that. setData({ 
duration: innerAudioContext. duration, 
currentTime: innerAudioContext. currentTime 
}) 
}) 
} else{ 
innerAudioContext. pause( ); 
innerAudioContext. onPause(() =>{ 
console. log( 'audioContext. paused', innerAudioContext. paused) 
}) 
} 

}, 

Nextaudio: function() { // 后 一 首 歌 
innerAudioContext. src = this. data. songList[2].url 
innerAudioContext. play( ); 
this. setData( { 

playmusicname:" 我 的 朋友 " 
}) 

}, 

showlist: function(e) { // 显 示 播 放 列表 
this. setData( { 

songList_show: "block" 
}) 

}, 

closeList: function() { // 关 闭 播放 列表 
this. setData( { 

songList_show: "none" 
}) 
} 
}) 


【代码 讲解 】 songList 数组 存放 了 音乐 库 , 本 例 中 只 设置 了 3 首 歌 曲 ,其 中 歌曲 的 
URL 地 址 的 获取 很 关键 ,可 以 根据 本 实 训 项 目 附带 的 视频 来 获取 小 程序 可 以 识别 的 URL 
地 址 。 文 件 中 ,bindViewTap 函数 控制 播放 类 别 的 显示 与 不 显示 ; modeChoose 函数 控制 歌 
曲 播放 方式 循环 与 否 ; audioPlay 函数 控制 歌曲 播放 和 和 暂停 ; audioPre 和 audioNext 函数 显 
示 上 一 首 和 下 一 首 的 切换 ; showList 和 closeList 函数 控制 播放 列表 的 显示 与 不 显示 。 

pages/index/createInnerAudioContext.wxss 的 代码 如 下 : 


/ xx index. wxss xx / 
.top { 
display: flex; 
flex— direction: column; 


align— items: center; 
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' 

.playmusicnamef 
height :30rpx; 
color: # ffffff; 

所 


.music 一 player { 


margin: 40rpx; 
border — radius: 50 %; 
animation: trun around 20s linear 1s infinite; 
position: relative; 
} 
. topimg{ 
width: 600rpx; height: 600rpx; 
} 
@keyframes trun around{ 
0% {transform: rotate(0deg) ;transition:transform 0s;} 
100% {transform: rotate(360deg);} 
} 
.mid { 
width:600rpx; 
margin ~ top: 50px; 
padding:0; 
display: flex; 
justify- content: space - between; 
align— items: center; 
margin— left:60rpx; 
} 
.btns { 
border - radius: 50 %; 
text ~ align: center; 
background - color: rgb(206, 206, 231); 
display:flex; 
justify ~ content :center; 
align ~ items: center; 


.play_pause { 
width:130rpx; 
height:130rpx; 


.Ppre_next { 
width:80rpx; height:80rpx; 


. img_pre next{ 
width:40 %; 
height :40 %; 


.img_play_pause{ 
width:30 %; height:30 %; 


.modeimg{ 
width:50 %; height:50 %; 
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.progress bar{ 
width:190px; height:2px; 
padding:0; 
background - color: rgb(106, 136,131); 
display:flex; 
justify— content: flex— start; 
align— items: stretch; 
} 
.passed time { 
width:10 %; 
background - color: red; 
} 
.point{ 
width:31rpx; height:31rpx; 
margin:30rpx 0; 
border - radius: 50 $%; 
background - color: white; 
position:relative; 
top: ~ 40rpx; 
} 
.time { 
font — size:10px; 
width:70rpx; color:white; 
} 
.music list{ 
width:100 %; height: 400rpx; 
position:fixed; 
bottom:0; right:0; 
color:black; 
background - color: white; 
opacity:0.8; 
overflow: scroll; 
display: flex; 
} 
.list 1if{ 
display:block; 
width:100 %; 
padding:20rpx; 
border - bottom:1px dotted silver; 
} 
page{background — color: #000000} 
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交互 接口 主要 实现 用 户 和 小 程序 之 间 的 交互 功能 ,例如 wx.showToast() 接 口 可 以 弹出 
提示 消息 给 用 户 ,wx.showModal() 和 wx.showActionSheet() 接 口 可 以 让 用 户 做 出 选择 操 
作 。 开 放 接 口 则 实现 了 让 小 程序 调用 第 三 方 服务 的 功能 ,例如 微 信 支付 接口 让 小 程序 可 以 
调用 微 信 支 付 功能 ,模板 消息 接口 让 小 程序 可 以 调用 公众 平台 来 发 送 消息 。 可 以 说 交互 接 
口 和 开放 接口 是 商业 开发 必然 会 使 用 到 的 功能 性 接口 ,其 中 微 信 登 录 接 口 . 微 信 支 付 接口 和 
模板 消息 接口 必须 配合 后 端 程序 才能 实现 功能 ,它们 属于 难度 较 大 的 高 级 接口 。 
本 章 主要 目标 
。 了解 微 信 小 程序 常见 的 交互 接口 和 开放 接口 ; 
*。 熟练 掌握 wx. showToast ( )、wx. showLoading ( ) 、wx. showModal ( ) 和 wx 
.showActionSheet() 4 个 交互 接口 的 应 用 ; 
。 熟练 掌握 微 信 登 录 接 口 , 微 信 支 付 接口 .模板 消息 接口 .获取 用 户 信 息 接 口 、 小 程序 
间 跳 转 接口 ,获取 用 户 收 货 地 址 接口 和 SOTER 指纹 认证 接口 等 开放 接口 的 应 用 。 


9.1 交互 反馈 


用 户 在 使 用 小 程序 的 时 候 , 通常 需要 和 程序 进行 交互 操作 ,小 程序 提供 了 
wx.showToast()、 wx. showModal ( )、 wx. showLoading ( )、 wx. showActionSheet ( )、 
wx.hideToast() 和 wx.hideLoading() 6 个 交互 接口 。 


9.1.1 消息 提示 框 wx.showToast() 和 加 载 提 示 框 
wx.showLoading() 


wx.showToast(Object object) 和 wx.showLoading (Object object) 分 别提 示 普 通信 息 
和 加 载 信息 。 这 两 个 接口 的 相同 之 处 是 用 户 没 有 选择 的 权限 , 只 能 被 动 接受 。 
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wx.showToast() 接 口 一 般 显 示 文 字 信息 ,给 用 户 提醒 。wx.showLoading() 接 口 一 般 显示 
状态 信息 ,例如 “正在 下 载 ” 的 状态 “正在 登录 ”的 状态 或 者 “正在 处 理 ” 的 状态 。 它 们 的 属性 
如 表 9.1 和 表 9.2 所 示 。 


表 9.1 wx.showToast() 接 口 属性 表 


属 性 类 型 | 必 填 说 明 

title string 是 | 提示 的 内 容 

icon string 否 | 图 标 

image String 否 自 定义 图 标的 本 地 路 径 ,image 的 优先 级 高 于 icon 

duration number 否 | 提示 的 延迟 时 间 

mask boolean 否 | 是 否 显 示 透 明 蒙 层 ,防止 触摸 穿 透 

Success function 否 | 接口 调用 成 功 的 回调 函数 

fail function 否 | 接口 调用 失败 的 回调 函数 

complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 .失败 都 会 执行 ) 
表 9.2 wx.showLoading() 接 口 属 性 表 

属 性 类 型 | 必 填 说 明 

title string 是 | 提示 的 内 容 

mask boolean 否 | 是 否 显示 透明 蒙 层 ,防止 触摸 穿 透 

Success function 否 | 接口 调用 成 功 的 回调 函数 

fail function 否 | 接口 调用 失败 的 回调 函数 

complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


加 9-1 本 例 通过 一 个 登录 的 案例 来 说 明 wx. showToast() 和 wx 
.showLoading() 接 口 的 使 用 ,程序 运行 效果 如 图 9.1 和 图 9.2 所 示 。 


e000 WeChat4G 


图 9.1 登录 中 图 9.2 登录 成 功 
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pages/login/login.wxml 的 代码 如 下 : 


< form report — submit bindsubmit = 'formsubmit' bindreset = 'formreset'> 
<view> 用 户 名 < input placeholder = ' 请 输入 用 户 名 ' name = "yhm"></input ></view> 
< view > 密码 < input placeholder = ' 请 输入 密码 ' name = "mm"></input ></view> 
<view>< button form- type= 'submit'> 提 交 </button > 
< button form type = 'reset'> 重 置 </button ></view> 
</form> 
< view class = "item bottom— info"> 
<view> 没有 账户 ? < text > 注册 </text > </view > 
< view class = "wechat ~ icon" bindtap= 'dian’> 
< image src = "/image/wechat.png"” /> 
</view> 


</view> 
pages/login/login.js 的 代码 如 下 : 


var app = getApp(); 
Page({ 
data:{ 
}, 
onLoad: function(options){ 
}, 
formsubmit :function(e){ 
console. log(e) 
if (e. detail.value. yhm == "admin"&e. detail.value.mm 
{ 
wx. setStorageSync( "name", e. detail. value. yhm); 
wx. ShowLoading({ 
title: ' 加 载 中 '， 
duration: 10000 
好 


setTimeout(function() { 


"admin") 


wx. redirectTo( { 
url: '../user/user', 
}) 
}, 10000) 


setTimeout(function() { 
wx. ShowToast({ 
title: ' 登 录 成 功 '， 
icon: 'success', 
duration: 10000 
}) 
}, 10000) 


}) 


【代码 讲解 】 为 了 简化 程序 ,本 例 设置 当 判 断 账号 和 密码 同时 等 于 “admin” 的 时 候 则 
登录 成 功 , 先 调用 wx.showLoading() 接 口 显示 “登录 中 ”, 再 调用 wx.showToast() 接 口 显 示 
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“登录 成 功 ”。 但 是 两 个 接口 不 能 被 同时 激发 ,因为 如 果 被 同时 激发 , wx.showToast() 接 口 
会 覆盖 wx.showLoading() 接 口 , 所 以 wx.showToast() 接 口 被 写 在 了 setTimeout() 延 时 函 
数 里 面 , 从 时 间 上 把 两 个 接口 错开 。 


9.1.2” 模 态 对 话 框 wx.showModal() 和 操作 菜单 


wx.showActionSheet() 


当 用 户 做 出 选择 的 时 候 , 9.1.1 节 中 的 wx. showToast (Object object) 和 wx 
.showLoading(Object object) 接 口 就 不 够 用 了 ,小 程序 提供 了 wx. showModal (Object 
object) 显 示 模 态 对话 杠 和 wx.showActionSheet(Object object) 显示 操作 菜单 两 个 接口 , 它 
们 的 属性 如 表 9.3 和 表 9.4 所 示 。 


表 9.3 wx.showModal() 接 口 属性 表 
属 性 类 型 | 必 填 说 明 

title string 是 | 提示 的 标题 
content string 是 | 提示 的 内 容 
showCancel boolean 否 | 是 否 显示 取消 按钮 
cancelText string 否 | 取消 按钮 的 文字 ,最 多 4 个 字符 
cancelColor String 否 | 取消 按钮 的 文字 颜色 ,必须 是 十 六 进 制 格式 的 颜色 字符 串 
confirmText string 否 | 确认 按钮 的 文字 .最 多 4 个 字符 
confirmColor string 否 | 确认 按钮 的 文字 颜色 ,必须 是 十 六 进 制 格式 的 颜色 字符 串 
Success function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 
complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 

表 9.4 wx.showActionSheet() 接 口 属性 表 
属 性 类 型 必 填 说 明 
itemList Array.< string > 是 | 按钮 的 文字 数组 ,数组 长 度 最 大 为 6 
itemColor | string 否 | 按钮 的 文字 颜色 
success function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 
complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


wx.showModal(Object object) 显 示 模 态 对 话 框 接口 是 弹出 包括 “确定 ”和 “取消 ”两 个 
按钮 的 对 话 框 ,在 第 8 章 的 例 8-15 中 已 经 使 用 过 了 该 接口 .这 里 不 再 袭 述 。 

wx.showModal() 接 口 只 能 接受 用 户 的 两 个 选择 操作 , 当 交 互 选择 有 两 项 以 上 的 时 候 则 
需要 用 wx.showActionSheet(Object object) 显 示 操 作 菜单 接口 , 它 可 以 弹出 多 项 选择 供用 
户 操作 , 比 wx.showModal() 接 口 更 加 丰富 。 
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[ 男 ] -2 本 例 对 图 片 做 “保存 图 片 ”“ 预 览 图 片 ”“ 复 制图 片 地 址 ”等 操作 ,这 时 


wx.showModal() 已 经 不 能 胜任 了 ,需要 使 用 wx .showActionSheet() 接 口 ,程序 运行 效果 如 


图 9.3 所 示 。 


assse WeChat4G 


小 程序 定制 


无 党 妆 装 | 即 用 即 走 | 高 寻 定 制 | 功能 多 样 


保存 图 片 
预览 图 片 
复制 图 片 地 址 


取消 


图 9.3 wx.showActionSheet() 运 行 效果 


pages/showActionSheet/showActionSheet.wxml 的 代码 如 下 : 


<view id="{{src[0]}}" bindtap = "share"> 
<image src="{{src[0]}}"></image> 


</view> 
pages/showActionSheet/showActionSheet.js 的 代码 如 下 : 


const app = getApp() 
Page({ 
data: { 
tapIndex: 0, 


Src: 


["https://timgsa. baidu. com/timg?image&quality = 80&size = b9999 10000&sec = 155946 
9676437&di = 2ec38£7708431273d174cd783bclbc58&imgtype = 0&src = http% 3A % 2F % 2Fwxl . 


sinaimg. cn % 2Flarge % 2F007aKGv0gylfv0x6gx8rzj30140bv44c. jpg"] 
}, 
share: function(e) { 
var that = this 
console. log(e. currentTarget. id) 
wx. ShowRctionSheet({ 
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itemList: [ ' 保 存 图 片 '，' 预 览 图 片 '，' 复 制图 片 地 址 ']， 
success(res) { 
console. log(res. tapIndex) 
console. log(res) 
if (res. tapIndex == 0) { 
wx. downloadFile( { 
url: that. data. src[0], 
success(res) { 
Wx. saveImageToPhotosAlbunm( { 
filePath: res. tempFilePath 
}) 
wx. showToast ({ 
title: ' 保 存 成 功 '， 
icon: "success'， 
duration: 1500 
]) 7 
} 
}) 
} 
if (res. tapIndex == 1) { 
wx. previewImage( { 
current: that. data. src[0], 
urls: that. data. src 
}) 
} 
}, 
fail(res) { 
console. log(res. errMsg) 
} 
}); 
} 
}) 


【代码 讲解 】 在 使 用 wx.showActionSheet() 接 口 的 过 程 中 需要 注意 : 用 户 做 出 的 选择 
被 赋值 为 “res. tapIndex”。 当 用 户 选中 了 第 一 个 选项 “res. tapIndex” 等 于 0; 当 用 户 选 中 
了 第 二 个 选项 “res. tapIndex” 等 于 1; 以 此 类 推 。 

本 例 中 使 用 的 wx.saveImageToPhotosAlbum() 接 口 不 能 直接 保存 网 络 图 片 ,需要 通过 
wx.downloadFile() 接 口 获取 一 个 临时 图 片 地 址 。 

另外 ,程序 调用 wx.previewImage() 接 口 来 预览 图 片 时 ,因为 该 接口 的 urls 参数 需要 是 
一 个 数组 ,所 以 data 数据 中 的 src 写成 了 数组 。 


92 微 信 登录 接口 wx.login( ) 


小 程序 是 运行 在 微 信 基础 之 上 的 应 用 程序 , 当 一 个 小 程序 需要 登录 功能 的 时 候 , 开 发 者 
首先 想到 的 应 该 是 使 用 微 信 自 带 的 登录 接口 来 登录 小 程序 应 用 系统 ,而 不 是 让 用 户 注册 并 
登录 。wx.login(Object object) 正 是 小 程序 提供 的 开放 登录 接口 。 
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9.2.1 微 信和 登录 前 端 


wx.login(Object object) 调 用 接口 获取 登录 凭证 (code) ,通过 凭证 换取 用 户 登 录 态 信 


息 , 包 括 用 户 的 唯一 标识 (openid) 及 登录 的 会 话 密 钥 (session_key) 等 。 使 用 微 信 登录 接口 


登录 


小 程序 的 步骤 如 下 : 

(1) 通过 wx.login() 来 获取 code。 

(2) 如 果 成 功 获取 ,那么 返回 code。 

(3) 调用 wx.request() 向 服务 端 发 起 一 个 请 求 , 即 向 登录 api 接口 发 送 code。 

(4) 换取 openid 和 session_key。 

其 中 ,第 4 步 用 code 换取 openid 和 session_key, 需 要 后 端 程序 向 第 三 方 登录 凭证 校 验 接 


口 https://api.weixin.qq.com/sns/jscode2session?appid 一 APPID&secret 王 SECRET&js_code 一 


JSC( 


)DE&.grant_type 二 authorization _code 发 送 请 求 来 完成 ,接口 地 址 中 的 AppID 和 


AppSecret 是 开发 者 管理 后 台 获 取 的 ,具体 请 参考 图 1.13,JSCODE 是 由 wx.login() 获 取 的 


code 


不 一 


sessi 


第 4 步 正 常 返 回 的 JSON 数据 如 下 : 
{ 


"openid" : "USERID", 
"session key": "kJtdi6RF + Dv67QkbL1PGjw == ", 


} 
第 4 步 错误 返回 的 JSON 数据 如 下 : 
{ 


"errcode" : 40029, 
"errmsg" : "invalid code" 


} 

因为 每 一 个 用 户 微 信和 是 不 一 样 的 , 即 JSCODE 不 一 样 ,每 个 应 用 的 AppID 和 secret 也 
样 ,导致 返回 的 openid 和 session_key 也 具有 唯一 性 ,所 以 小 程序 使 用 openid 和 
on_key 来 标识 用 户 是 否 成 功 登录 了 小 程序 。 


贺 ;3 本 例 是 使 用 wx.login() 开 放 接 口 实现 登录 的 前 端 部 分 ,其 功能 为 向 后 端 发 
起 request 请 求 。 当 成 功 返 回 openid 的 时 候 , 程 序 在 Console 控制 台 打 印 结果 ,如 图 9.4 


所 示 


视频 讲解 
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Ey : Array(8), err 


Object 


图 9.4 登录 成 功效 果 
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pages/wxlogin/wxlogin.wxml 的 代码 如 下 : 


< form report — submit bindsubmit = 'formsubmit' bindreset = 'formreset'> 
< view> 用 户 名 < input placeholder = ' 请 输入 用 户 名 ' name = "yhm"></input ></view> 
< view > 密码 < input placeholder = ' 请 输入 密码 ' name = "mm"></input ></view> 
<view>< button form type = 'submit'> 提 交 </button >< button form - type = 'reset'> 重 置 
</button ></view> 
</form> 
< view class = "item bottom— info"> 
<view> 没有 账户 ? < text > 注册 </text > </view> 
< View class = "wechat ~ icon” bindtap = '1ogin'> 
< image src = "/image/wechat. png"” /> 
</view> 
</view> 


【代码 讲解 】 本 例 是 对 wxlogin.wxml 中 的 图 片 绑 定 了 点 击 事件 ,该 事件 调用 微 信 登 
录 功 能 。 
pages/wxlogin/wxlogin.js 的 代码 如 下 : 


const app = getApp() 
Page({ 


// 登 录 获 取 code 

login: function() { 

wx. login( { 

success: function(res) { 
console. log( 'code:' + res.code) 


// 发 送 请 求 
wx. request ( { 
url: 'http://localhost:8080/minilogin/loginservlet'， // 改 成 自己 的 服务 器 地 址 
data: { 
code: res. code, // 上 面 的 wx. login() 成 功 获取 的 code 


operFlag: 'getOpenid', 
}, 
header: { 
'content — type': 'application/json' // 默 认 值 
和 
success: function(res) { 
console. log(res) 


【代码 讲解 】 本 例 先 使 用 wx.login() 接 口 获取 用 户 的 code, 然 后 使 用 wx.request() 向 
后 端 程序 发 起 请 求 ,返回 的 结果 在 res 对 象 中 。 后 端 程序 是 采用 Servlet 形式 来 编写 的 。 
图 9.4 显示 程序 已 经 成 功 获 取 了 session_key 和 openid, 它 们 可 以 用 作成 功 登录 前 端的 


凭证 。 
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微 信 登录 后 端 


[ 贺 9-4 本 例 是 使 用 wx.login() 开 放 接口 实现 登录 的 后 端 部 分 ,其 功 
能 是 接收 前 端 传递 过 来 的 code 参数 ,向 第 三 方 登录 验证 接口 发 送 请 求 , 并 
向 前 端 返回 session_key 和 openid 两 个 结果 。 

src/servlet/loginservlet.java 的 代码 如 下 : 


package servlet; 
import java. io. BufferedReader; 


import java. io. IOException; 
import java. io. InputStreamReader; 


import java. io. PrintWriter; 
import java. net. URL; 
import java. net. URLConnection; 


import java, util. List; 
import javax. servlet. ServletException; 


import javax. servlet. annotation. WebServlet; 


import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 


/xx 


x* Servlet implementation class loginservlet 


x*/ 


@WebServlet("/loginservlet") 
public class loginservlet extends HttpServlet { 


private static final long serialVersionUID = 1L; 

private String appid = "你 的 appid"; 

private String secretKey = "你 的 secretKey"; 

@Override 

protected void doGet (HttpServletRequest req, HttpServletResponse resp) throws ServletException, 


IOException { 
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System. out. println("doGet ————-——-——-—-—--—-—-—--—— "ys 
doPost (req, resp); 
} 
@Override 
protected void doPost (HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
Syoten, wak. peiatla( "dobodt ====—==="m=="===“==== 机 
// 获 取 操 作 类 型 ,根据 类 型 执行 不 同 操作 
String operFlag = request. getParameter("operFlag"); 
System. out. println("operFlag" + operFlag); 
String results = ""; 
if ("getOpenid".equals(operFlag)) { 
String code = request. getParameter("code"); // 获 得 微 信 小 程序 传 过 来 的 code 
System. out. println(code); 
String url = "https://api.weixin. qq.com/sns/jscode2session? 
appid= "+ appid+ "&secret = " + secretKey+ "&js_code=" +code+ "ggrant type= 
authorization code"; 
// 接 口 地 址 https://api. weixin. qq. com/sns/jscode2session?appid = 
RPPID&secret = SECRET&js_code = JSCODE&grant type = authorization code; 
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System. out. println("url" + url); 
results = sendGetReq(url); // 发 送 http 请 求 
System. out. println("results" + results); 
} 
response. setContentType("application/json;charset = UTF — 8"); 
response. setHeader("catch - control", "no~ catch"); 
PrintWriter out = response.getWriter(); 
out. write(results); 
out. flush( ); 
out. close( ); 


} 
private String sendGetReq(String url) { 
String result = 
BufferedReader in = null; 
try{ 
String urlNameString = url; 
URL realUrl = new URL(urlNameString); 
// 打 开 和 URL 之 间 的 链接 
URLConnection connection = realUr]l. openConnection(); 
// 设 置 通用 的 请 求 属性 
connection. setRequestProperty("accept", "*/*"); 
connection. setRequestProperty("connection", "Keep— Alive"); 
connection. setRequestProperty("user - agent", "Mozilla/4.0 
(compatible; MSIE 6.0; Windows NT 5.1;SV1)"); 
// 建 立 实际 的 连接 
connection. connect( ); 
// 获 取 所 有 响应 头 字段 
java. util. Map < String, List < String >> map = connection. getHeaderFields(); 
// 遍 历 所 有 响应 头 字段 
for (String key : map.keySet()) { 
System. out. println(key + "--->"”+ map.get(key)); 


} 
// 定 义 BufferedReader 输入 流 来 读 取 URL 的 响应 
in = new BufferedReader(new InputStreamReader(connection. getInputStream())); 
String line; 
while ((line = in.readLine()) != null) { 
result += line; 
} 
} catch (Exception e) { 
System. out. println(" 发 送 GET 请 求 出 现 异常 '" + e); 
e. printStackTrace( ); 
// 使 用 finally 块 来 关闭 输入 流 
finally { 
try{ 
证 (int= null){ 
in. close(); 
} 
} catch (Exception e2) { 
e2.printStackTrace( ); 


} 


return result; 
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【代码 讲解 】 本 例 和 例 6-3 有 所 不 同 , 例 6-3 是 向 MySQL 数据 库 发 起 数据 访问 请 求 ， 
本 例 是 向 微 信 的 第 三 方 登录 验证 接口 发 起 请 求 。 但 结果 都 返回 了 JSON 格式 的 数据 。 从 
图 9.4 可 以 看 到 小 程序 已 经 成 功 获取 了 用 户 登 录 应 用 返回 的 session_key 和 openid, 它 们 可 
以 作为 判断 是 否 登 录 的 标识 ,用 户 就 不 需要 输入 账号 .密码 登录 应 用 程序 了 。 


9.3 微 信 支付 接口 wx.requestPayment() 


微 信 支 付 是 腾讯 公司 的 支付 业务 产品 , 微 信 支 付 商户 平台 支持 线 下 场所 .公众 号 、 小 程 
序 、PC 网 站 .App、 企 业 微 信 等 经 营 场景 快速 接 入 微 信 支付 。 微 信 支 付 全 面 打通 02O 生活 
消费 领域 ,提供 专业 的 互联 网 十 行业 解决 方案 , 微 信 支 付 支 持 微 信 红 包 和 微 信 理财 通 ,是 移 
动 支付 的 首选 。 微 信 小 程序 提供 了 wx.request Payment(O 〇 bject object) 来 发 起 微 信 支付 。 

使 用 微 信 支 付 功 能 之 前 ,应 先 开通 微 信 支 付 功能 ,目前 微 信 支付 功能 只 对 商户 开放 申 
请 ,申请 地 址 为 https://pay.weixin.qq.com/ 。 申 请 之 前 需 准 备 好 以 下 材料 。 

(1) 营业 执照 : 彩色 扫描 件 或 数码 照片 。 

(2) 组 织 机 构 代 码 证 : 彩色 扫描 件 或 数码 照片 , 若 已 三 证 合 一 , 则 无 须 提供 。 

(3) 对 公 银 行 账户 : 包含 开户 行 省 市 信息 ,开户 账号 。 

(4) 法 人 身份 证 : 彩色 扫描 件 或 数码 照片 。 

商户 在 微 信 公 众 平台 或 开放 平台 提交 微 信 支 付 开 通 申 请 .操作 界面 如 图 9.5 所 示 。 


旨 微 信 支 付 。 商店 6 开 双 mt 信 支付 


填写 商户 资料 确认 提交 


管理 员 信息 


三 超级 管理 员 将 接收 开户 信息 及 日 常 重要 管理 信息 ， 并 可 进行 资金 操作 ; 如 需 变 更 超级 管理 员 ， 请 返回 上 一 页 重新 扫 码 


超级 管理 员 姓名 


请 填写 超级 管理 员 姓 名 ， 需 要 与 微 信 实 名 一 至 


手机 号 码 +86 获取 短信 验证 码 


用 于 接收 微 信 支 付 的 重要 管理 信息 及 日 常 操作 验证 码 


短信 验证 码 


图 9.5 申请 开通 微 信 支付 功能 操作 界面 
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微 信 支付 工作 人 员 审 核资 料 无 误 后 ,为 商户 开通 相应 的 微 信 支付 权限 。 微 信 支 付 申请 
审核 通过 后 ,商户 申请 资料 时 填写 的 邮箱 会 收 到 由 微 信 支付 小 助手 发 送 的 邮件 ,此 邮件 包含 
商户 的 支付 账户 信息 ,如 表 9.5 所 示 。 表 中 的 4 个 参数 是 在 微 信 支 付 后 端 开发 时 需要 用 的 
参数 ,其 中 涉及 隐私 信息 , 需 妥 善 保 管 。 


表 9.5 邮件 收 到 的 参数 表 


邮件 中 的 参数 参数 名 说 明 
appid 是 微 信 小 程序 后 台 App 的 唯一 标识 ,在 小 程序 后 台 申 请 小 程序 
AppID appid 账号 后 , 微 信 会 自动 分 配对 应 的 appid, 用 于 标识 该 应 用 ,可 在 小 程序 一 


设置 -开发 设置 中 查看 
微 信 支付 商户 号 “| mch_ id | 商户 申请 微 信 支付 后 ,由 微 信 支付 分 配 的 商户 收 款 账号 
交易 过 程 生成 签名 的 密 钥 , 仅 保 留 在 商户 系统 和 微 信 支付 后 台 , 不 会 在 
网 络 中 传播 。 商 户 妥 善 保管 该 密 钥 , 切 勿 在 网 络 中 传输 ,不 能 在 其 他 客 
API 密 钥 key 户 端 中 存储 ,保证 密 钥 不 会 被 泄露 。 商 户 可 根据 邮件 提示 登录 微 信和 商 
户 平台 进行 密 钥 设置 ,也 可 按 以 下 路 径 设 置 : 微 信 商户 平台 (pay. 
weixin.qq.com) 悦 账户 设置 安全 一 密 钥 设置 

AppSecret secret AppSecret 是 AppID 对 应 的 接口 密码 ,用 于 获取 接口 调用 凭证 时 使 用 


9.3.1 微 信 支付 前 端 


微 信 支付 属于 小 程序 众多 接口 中 比较 复杂 的 一 个 , 它 需 要 后 端的 支持 ,其 前 端 接口 
wx.requestPayment() 属 性 如 表 9.6 所 示 。 


表 9.6 wx.requestPayment() 接 口 属性 表 


属 性 | 类 型 | 必 填 说 明 
是 | 时 间 戳 ,从 1970 年 1 月 1 日 00:00:00 至 今 的 秒 数 , 即 当 前 的 时 间 
nonceStr string 是 | 随机 字符 串 ,长 度 为 32 个 字符 以 下 
package string 是 | 统一 下 单 接口 返回 的 prepay_id 参数 值 ,提交 格式 如 : prepay_id 一 *x#x 
signType string 否 | 签名 算法 
paySign string 是 | 签名 ,具体 签名 方案 参见 小 程序 支付 接口 文档 
Success function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 
complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


timeStamp | string 


示例 代码 如 下 : 


wx. requestPayment( 
七 imeStamp: '', 
nonceStr: '', 


package: '', 
signType: 'MD5', 
paySign: "' 


success(res) { }, 
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fail(res) { } 
}) 


[ 贺 9-5 本 例 以 小 程序 前 端 实现 支付 购买 一 件 商品 为 例 ,展示 微 信 支 付 的 过 程 和 
代码 实现 ,为 减少 交易 费用 ,本 例 把 金额 固定 为 1 分 钱 ,程序 运行 效果 如 图 9.6 一 图 9.8 
所 示 。 


图 9.6 发 起 支付 图 9.7 输入 支付 密码 或 调用 指纹 图 9.8 支付 成 功 


pages/pay/pay.wxml 的 代码 如 下 : 


< View class = "top"> 

< image src = "../img/p30.png"></image> 

</view> 

<view class = 'product'> 

< view class = "title"> HUAWEI P30 麒麟 980 超 感光 徕卡 三 摄 屏 内 指纹 双 景 录像 8GB + 64GB 全 网 通 

版 (天 空 之 境 )</view> 

<view class= "id"> 商 品 编码 2601010102103 </view> 

< view class = "price"> 价 ” 格 ¥ 3988.00 </view> 

</view> 

<view class = "buttonarea" > 
< button class = "btn" type = "primary" bindtap = "orderpay"> 去 结算 </button > 
< button class = "btn" type = "warn" bindtap = "clear"> 清 空 </button > 


</view> 
pages/pay/pay.js 的 代码 如 下 : 
// 获 取 应 用 实例 
var app = getApp() 
Page({ 
// 


orderpay: function(e) { 
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var that = this; 
wx. login({ 
success: function(res) { 
wx. request ({ 
url: 'https://skill. qiujikeji. com/mini/getOpenid '， 
method: "POST'， 
data: { 'js_code': res.code }, 
success: function(res) { 
console. log(res. data) 
that. xiadan(res. data); 


}, 
// 下 单 
xiadan: function(openid) { 
var that = this; 
wx. request ({ 
url: 'https://skill. qiujikeji. com/mini/pay/teacher', 
method: 'POST', 
data: {'openid':openid}, 
success: function(res) { 
Var res = res. data 
Wx. requestPayment({ 
timeStamp: res.timeStamp, 
nonceStr: res. nonceStr, 
package: res. package, 
signType: 'MD5°', 
paySign: res. paySign, 


}) 


【代码 讲解 】 微 信 支付 的 前 端 实 际 上 代码 相对 简单 ,文件 pay.js 的 微 信 支 付 前 端 部 分 
包含 3 个 步骤 : 步骤 一 是 向 后 端 发 起 请 求 ,获取 openid, 此 步骤 和 9.2 节 内 容 相同 ; 步骤 二 
是 利用 返回 的 openid 向 后 端 发 起 下 单 请 求 , 下 单 成 功 返 回 如 图 9.9 所 示 的 5 个 参数 ,而 这 5 
个 参数 是 wx.requestPayment() 接 口 需要 的 参数 ; 步骤 三 利用 返回 的 5 个 参数 向 微 信 支付 
接口 wx.requestPayment() 发 起 支付 请 求 。 有 了 步骤 一 和 步骤 二 ,后 端 就 知道 步骤 三 这 笔 
支付 是 谁 发 起 的 了 。 


9.3.2 ” 微 信 支付 后 端 


微 信 支付 是 小 程序 接口 中 最 为 复杂 的 接口 之 一 ,其 复杂 度 体 现在 后 端的 开发 难度 上 。 
接口 前 端 和 后 端的 工作 流程 包含 以 下 7 个 步骤 : 

(1) 通过 wx.login() 接 口 获取 code( 一 个 code 只 能 用 一 次 ) 。 

(2) 通过 code 获取 openid, 详 见 9.2 节 。 
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ogTYu5TfQP5Y2IHpJewDQ 


图 9.9 


微 信 支付 过 程 


(3) 小 程序 发 送 openid 到 后 端 程序 ,后 端 程序 利用 openid 和 表 9.7 中 的 appid、mch_ 
id ,随机 字符 串 、 签 名 、 商 品 描述 、 商 品 订单 号 ,金额 \ 下 单 IP、 通 知 地 址 和 交易 类 型 等 参数 一 


起 组 装 成 订单 数据 。 


(4) 后 端 程序 向 微 信 统一 下 单 接口 https://api.mch.weixin.qq.com/pay/unifiedorder 
提交 订单 ,并 发 送 步 又 (3) 中 组 装 的 订单 数据 ,后 端 程序 接收 返回 结果 后 ,加 工 得 到 预付 款 编 


号 prepay_id。 


(5) 后 端 程序 利用 AppID、timeStamp、nonceStr、prepayid 和 signType 5 个 参数 加 工 得 
到 wx. request Payment ( ) 接口 需要 的 JSON 格式 的 timeStamp、nonceStr、 package、 


signType 和 sign 参数 ,并 返回 给 小 程序 。 


(6) 小 程序 前 端 调用 wx.requestPayment() 接 口 发 起 支付 ,并 完成 支付 。 


(7) 服务 器 收 到 回调 。 


微 信 统一 订单 接口 属性 如 表 9.7 所 示 。 
表 9.7 微 信 统一 订单 接口 属性 表 


类 型 
字段 名 | 变 量 名 | 必 填 | ,长度 ) 示例 描述 
车 String Mt fr 四 
小 程序 ID | appid 是 的 wxd678efh567hg6787 微 信 分 配 的 小 程序 ID 
商户 号 mch_id 是 1230000109 微 信 支 付 分 配 的 商户 号 
随机 字符 串 ,长 度 要 求 在 32 
Stri 5K8264ILTKCH16C' 
随机 字符 串 | nonce_str 是 | Sng | 5K32640KCDI6CQ | 位 以 内 。 推 荐 随机 数 生成 
(32) | 2502SI8ZNMTM67VS 人 
String | C380BEC2BFD727A4 通过 签名 算法 计算 得 出 的 签 
签名 sign 是 es 3 pp 
(32) B6845133519F3AD6 名 值 , 详 见 签名 生成 算法 
商品 简单 描述 ,该 字段 请 按 
Stri 省 关 A 会 员 
商品 描述 “| body 是 | Sting | 腾讯 充值 中 心 -QQ 会 员 | 照 规范 传递 ,具体 请 见 参数 
(128) | 充值 2 
规定 
商户 系统 内 部 订单 号 ,要 求 
a 32 个 字符 内 ,只 能 是 数字 、 
商户 订单 号 | out_trade no “| 是 2.01508E+13 大 小 写字 母 和 符号 ” -| * ”， 
且 在 同一 个 商户 号 下 唯一 。 
详 见 商户 订单 号 
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续 表 
类 型 本 
字段 名 变 量 名 | 必 填 (长 度 ) 示 例 描 述 
订单 总 金额 ,单位 为 分 , 详 见 
标价 金额 “| total_fee 是 | Int 88 esa Py 
Be 支持 IPv4 和 IPv6 两 种 格式 
终端 IP spbill_create ip | 是 a 123.12.12.123 的 IP 地 址 。 调 用 微 信 支付 
API 的 机 器 IP 
异步 接收 微 信 支付 结果 通知 
_ String | http://www. weixin. qq. | 的 回调 地 址 ,通知 URL 必须 
fy_url 
驯 庆 地址 | 加 a | AGE 为 外 网 可 访问 的 URL, 不 能 
携带 参数 
String | 小 程序 取 值 如 下 : JSAPI, 详 
交易 类 型 trade_type 是 C16) JSAPI 细 说 明 见 参数 规定 
trade_type 一 JSAPI, 此 参数 
Ew , String | oUpF8uMuAJO _ M2pxb | 必 传 ,是 用 户 在 商户 appid 
jh 识 
攻 户 标识， [apenid 否 | (128) | 1Q9zNjWeS6o 下 的 唯一 标识 ,openid 的 获 


取 可 参考 【获取 openid】 


表 9.7 中 只 列 出 了 11 个 属性 ,统一 下 单 接口 参数 共有 23 个 属性 ,其 他 参数 请 参看 网 址 
https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1。 


[ 贺 9-6 本 例 为 例 9-4 的 后 端 代码 部 分 ,项 目 结构 图 如 图 9.10 所 示 。 


src/servlet/order.java 的 代码 如 下 : 


protected void doPost ( HttpServletRequest request, 


vsrc 


vB com 
v © github 

~ © wxpay 

v sdk 


v 对 servlet 
国 loginservlet.java 
国 orderjava 
加 tooljava 


国 WXPayDomain.java 
国 WXPayjava 

国 WXPayConfig.java 

国 WXPayConstants.java 
国 WXPayReportjava 

国 WXPayRequestjava 
国 WXPayUtiljava 

国 WXPayXmlUtiljava 


图 9.10 ” 微 信 支 付 后 端 项 目 结构 图 


ServletException，IOException { 
JSONArray results = null; 
JSONObject obj = new JSONObject(); 


obj. put("return code", 


weadil™); 


HttpServletResponse response) throws 
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results. add(obj); 
String openid = request. getParameter("openid"); 
System. out. println("openid = ”+ openid); 
String reqStr = tool.getReqStr(openid); // 组 装 预 下 单 的 请 求 数据 
String url = "https://api. mch. weixin. qq. com/pay 
/unifiedorder" + "?order" + reqStr; 

System. out. println("reqStr=" + reqgStr); 
String resultsl = tool. sendGetReq(ur1) ; // 发 送 post 数据 到 微 信 预 下 单 
System. out. println("prepay from weixin: \n " + results1); 
Map < String, String > return data = null; 
try{ 

return data = WXPayUtil.xmlToMap(resultsl1);// 微 信和 的 一 个 工具 类 
} catch (Exception e) { 

//TODO Auto - generated catch block 

e. printStackTrace( ); 

System. out. println(e. getMessage( )); 
} 
String return code = return data.get("return code"); 
System. out. println("return code=" + return code); 
if("SUCCESS". equals(return code)){ 

String prepay_id = return data.get("prepay_ id"); 

results = tool.conPayParam(prepay_id); // 组 装 返 回 数据 
} 
response. setContentType( "application/json;charset = UTF ~ 8"); 
response. setHeader("catch— control", "no~ catch"); 
PrintWriter out = response. getWriter(); 
out. write(results); 
out. flush( ); 
out. close(); 


} 


【代码 讲解 】 order.java 是 一 个 Servlet 程序 ,其 功能 主要 是 接收 openid, 通 过 tool 
.getReqStr() 把 openid 转化 成 统一 下 单 接口 需要 的 如 表 9.7 所 示 的 参数 reqStr, 然 后 向 统一 
下 单 接口 下 单 返回 resultsl ,再 通过 WXPayUtil.xmlToMap() 函数 用 resultsl 获取 prepay_ 
id, 最 后 使 用 tool.conPayParam (prepay_id) 返 回 给 小 程序 wx.requestPayment() 需 要 的 
5 个 参数 results。 图 9.10 中 com.github.wxpay.sdk 包 下 的 8 个 工具 类 是 微 信 支付 官方 提 
供 的 SDK 案例 代码 ,可 在 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php? chapter 一 
11_1 下 载 得 到 。 

src/servlet/tool.java 的 代码 如 下 : 


public class tool { 
public static String getReqStr(String openid){ 
Map < String, String > data = new HashMap < String, String >(); 
String out_ trade no = setTradeNo(); Fa 
data. put("appid"，" 你 的 appid"); 
data. put("mch id", "你 的 mer_id"); 
data. put("nonce_str", WXPayUtil. generateNonceStr()); 
data. put("sign type", "MD5"); 
data. put("body", "spy test"); 
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data. put( "out trade no", out trade no) ; 
data. put("device info", ""); 
data. put ("fee type", "CNY"); 
data. put("total fee", "1"); /人 /1 分 钱 
data. put("spbill create ip", "123.12.12.123"); 
data. put("notify url", "http://xex/wxpay/notify"); 
data. put ("trade type", "JSAPI"); 
data. put ("product id", "12"); 
data. put( "openid", openid); 
try{ 
String sign = WXPayUtil.generateSignature(data, "你 的 merKey", SignType. MD5); 
data. put ("sign", sign); 
} catch (Exception e) { 
e. printStackTrace( ); 
System. out. println("sign error"); 
} 
String reqBody = null; 
try{ 
reqBody = WXPayUtil.mapToXm] (data); 
} catch (Exception e) { 
//TODO Auto - generated catch block 
e. printStackTrace( ); 
} 
return reqBody; 


// 保 证 唯一 
public static String setTradeNo( ){ 
Random rdm = new Random(6); 
String orderid = "20211909105011" + rdm. nextInt(); 
System. out. println("orderid = " + orderid); 
return orderid; 


// 组 装 返回 客户 端的 请 求 数据 
public static JSONArray conPayParam(String prepayid){ 
String results = ""; 
Map < String, String > map = new HashMap < String, String >(); 
map. put("appId"，" 你 的 appid"); 
String timeStamp = Long. toString(WXPayUtil. getCurrentTimestamp() ); 
map. put ("timeStamp", timeStamp); 
map. put ("nonceStr", WXPayUtil. generateNonceStr()); 


map. put("package", "prepay id=" + prepayid); 


map. put ("signType", "MD5"); //5 个 参数 
String sign = null; 
try { 
sign = WXPayUtil. generateSignature(map, "你 的 merKey”", SignType. MD5); 
// 第 6 个 参数 


map. put ("sign", sign); 
} catch (Exception e) { 
//TODO Auto - generated catch block 
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e. printStackTrace( ); 
System. out. println(e. getMessage( )); 
} 

JSONArray jsonarray = new JSONArray(); 
JSONObject jsonobj = new JSONObject(); 
jsonobj. put ("timeStamp", timeStamp); 
jsonobj. put ("nonceStr", WXPayUtil. generateNonceStr()); 
jsonobj. put("package", "prepay id=" + prepayid); 
jsonobj. put ("signType", "MD5"); 
jsonobj. put ("paySign", sign); 
jsonarray. add( jsonobj); 
return jsonarray; 

} 

public static String sendGetReq(String url) { 
String result = ""; 
BufferedReader in = null; 
try{ 
String urlNameString = url; 
url realUrl = new url(urlNameString); 
// 打 开 和 URL 之 间 的 链接 
URLConnection connection = realUr]l. openConnection(); 
// 设 置 通用 的 请 求 属性 
connection. setRequestProperty("accept", "* /x*x"); 
connection. setRequestProperty("connection", "Keep— Alive"); 
connection. setRequestProperty("user — agent", "Mozilla/4.0 
(compatible; MSIE 6.0; Windows NT 5.1;SV1)"); 
// 建 立 实际 的 连接 
connection. connect( ); 
// 获 取 所 有 响应 头 字段 
java. util. Map < String，List < String >> map = connection. getHeaderFields(); 
// 人 遍历 所 有 的 响应 头 字段 
for (String key : map. keySet()) { 
System. out. println(key + "—-—->" + map.get(key)); 


} 
// 定 义 BufferedReader 输入 流 来 读 取 URL 的 响应 
in = new BufferedReader(new InputStreamReader(connection. getInputStream( ) ) ) 7 
String line; 
while ((line = in.readLine()) != null) { 
result += line; 
} 
} catch (Exception e) { 
System. out. println(" 发 送 GET 请 求 出 现 异常 !'" + e); 
e. printStackTrace( ); 
} // 使 用 finally 块 来 关闭 输入 流 
finally { 
try { 
if (in!= null) { 
in.close(); 
} 
} catch (Exception e2) { 
e2. printStackTrace( ); 
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return result; 


} 


【代码 讲解 】 tool.java 是 order.java 的 工具 类 ,其 中 ,getReqStr(String openid) 函数 把 
openid 转化 成 统一 下 单 接口 需要 的 数据 ; conPayParam (String prepayid) 函数 将 prepayid 
转化 成 wx.requestPayment() 接 口 需要 的 数据 ; sendGetReq(String url) 函数 是 Servlet 向 
外 部 URL( 这 里 是 腾讯 统一 下 单 接口 ) 发 送 请 求 并 返回 结果 。 

项 目 中 的 com 包 下 的 多 个 Java 程序 是 微 信 支 付 官方 提供 的 demo 工具 类 ,下 载 地 址 为 
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=1]1_1。 


9.4 获取 用 户 信息 接口 wx.getUserlnfo( ) 


小 程序 提供 了 wx.getUserInfo() 接 口 来 获取 用 户 的 微 信 账号 信息 ,该 接口 一 般 伴随 
wx.login() 接 口 出 现 , 它 可 以 获取 的 信息 属性 如 表 9.8 所 示 。 


表 9.8 wx.getUserInfo() 属 性 表 


字 段 名 含 义 
UserInfo 用 户 信息 
string nickName 用 户 昵称 
用 户头 像 图 片 的 URL,URL 最 后 一 个 数值 代表 正方 形 头 像 大 小 (有 0、46、64、96、 
string avatarUrl 132 数值 可 选 ,0 代表 640X 640 的 正方 形 头 像 ,46 表示 46X46 的 正方 形 头像 ,剩余 
数值 以 此 类 推 ,默认 为 132) 
number gender 用 户 性 别 


string country 用 户 所 在 国家 
string province 用 户 所 在 省 份 
string city 用 户 所 在 城市 
string language 显示 country .province city 所 用 的 语言 


贺 -7 本 例 使 用 wx.getUserInfo() 接 口 获取 用 户 的 信息 ,在 Console 
控制 台 打印 的 个 人 微 信 账号 信息 如 图 9.11 所 示 。 


图 9.11 Console 控制 台 打 印 的 个 人 微 信 信 息 
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pages/getUserInfo/getUserInfo.wxml 的 代码 如 下 : 


<view class= "container"> 
<view class = "userinfo"> 
< image bindtap = " bindViewTap" class = " userinfo - avatar" src = " {{userInfo. 
avatarUrl}}" mode = "cover"></image> 
< text class = "userinfo - nickname">{ {userInfo. nickName} }</text > 
< text class = "userinfo - nickname">{ {userInfo. gender} }</text > 
< text class = "userinfo - nickname">{ {userInfo. city} }</text > 
"userinfo - nickname">{ {userInfo. province} }</text > 
userinfo - nickname">{ {userInfo. country} }</text > 
< text class = "userinfo - nickname">{ {userInfo. language} }</text > 
</view> 
</view> 


pages/getUserInfo/getUserInfo.js 的 代码 如 下 : 


< text class = 


< text class = 


const app = getApp() 
Page({ 
data: { 
motto: 'Hello World', 
userInfo: {} 
}, 
onLoad: function() { 
var that = this; 
wx. getUserInfo({ 
success: function(res) { 
console. log(res. userInfo) 
that. setData( { 
userInfo: res.userInfo 


}) 


【代码 讲解 】 wx. getUserInfo() 获 取 的 信息 封装 在 UserInfo 对 象 中 ,通过 形 如 
userInfo.nickName 的 属性 可 以 引用 到 个 人 的 微 信和 账号 信息 。 


95 模板 消息 template 


小 程序 不 可 以 和 微 信 一 样 发 送 可 能 打扰 用 户 的 消息 ,但 是 可 以 发 送 模板 消息 。 模 板 消 
息 是 基于 微 信 的 通知 渠道 ,小 程序 官方 为 开发 者 提供 了 可 以 高 效 触 达 用 户 的 模板 消息 能 力 ， 
以 便 实现 服务 的 闭环 并 提供 更 佳 的 体验 。 只 有 以 下 情况 才 允 许 发 送 模 板 消 息 。 

1. 支付 

当 用 户 在 小 程序 内 完成 过 支付 行为 ,可 允许 小 程序 在 7 天 内 向 用 户 推 送 有 限 条 数 的 模 
板 消 息 (1 次 支付 可 下 发 3 条 ,多 次 支付 下 发 条 数 独立 ,互相 不 影响 )。 

2. 提交 表单 

当 用 户 在 小 程序 内 发 生 过 提交 表单 行为 且 该 表单 声明 为 要 发 模板 消息 的 ,开发 者 需要 
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向 用 户 提 供 服务 时 ,可 允许 小 程序 在 7 天 内 向 用 户 推送 有 限 条 数 的 模板 消息 (1 次 提交 表单 
可 下 发 1 条 ,多 次 提交 下 发 条 数 独立 ,相互 不 影响 ) 。 

在 开发 模板 消息 功能 之 前 ,开发 者 需要 先进 入 小 程序 管理 后 台 创 建 消息 模板 。 进 入 小 
程序 管理 后 台 之 后 , 单 击 左 侧 菜单 “模板 消息 ”会 出 现 如 图 9.12 所 示 的 模板 消息 栏目 ,其 中 
的 “模板 ID 是 开发 模板 消息 后 端 程序 时 需要 使 用 到 的 。 


模板 消息 
我 的 模板 。 ”楼板 库 
个 人 模板 库 还 可 添加 24 个 
标题 关键 词 模板 ID 操作 
订单 支付 成 功 通 知 酒店 名 称 、 地 点 、 入 住 hlfC496na3l_BCdI7bs. 复制 详情 ”删除 


图 9.12 “模板 消息 ”栏目 


单 击 图 9.12 中 的 “添加 ”按钮 ,按照 图 9.13 所 示 进 行 模板 消息 的 创建 ,配置 关键 词 的 时 
候 只 能 选中 系统 默认 已 经 存在 的 关键 词 ,不 能 新 建 关键 词 。 被 选中 的 关键 词 会 出 现在 “已 选 
中 的 关键 词 "栏目 中 ,可 以 通过 长 按 鼠 标 左 键 进行 拖 动 的 方式 来 调整 已 选中 的 关键 词 的 上 下 
顺序 ,这 个 顺序 就 决定 了 图 9.14 中 关键 词 的 顺序 。 在 选中 所 有 意向 关键 词 之 后 , 单 击 “ 提 
交 ” 按 钮 , 即 完成 模板 消息 在 小 程序 管理 账号 中 的 创建 操作 。 


© 
配置 关键 词 找 不 到 合适 的 关键 词 ” 点 击 申请 
订单 支付 成 功 通知 请 输入 关键 河 过 流 Q 
2019 年 06 月 
下 单 门店 
家 有 名 木 
2017 年 4 月 10 日 商品 编号 
加 
YY 商家 名 称 
配送 时 间 
查看 详情 已 选中 的 关键 词 “ 拖 竺 可 调整 顺序 
了 商家 名 称 三 
六 配送 时 间 三 
提交 


图 9.13 创建 模板 消息 
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© 模 iRID 。 hlfC496na31_BCdI7bSA4a2-Z_mOg2qjFko-hGkMtf4 得 制 


标题 订单 支付 成 功 通知 


{(keyword1.DATA)) 
{keyword2.DATA)) 
{(keyword3.DATA)) 
{(keyword4.DATA)) 
各 {Ikeyword5.DATA)) 
规 {fkeyword6.DATAI) 


桔子 水 昆 酒店 
新 者 东 路 
2016-01-01 
2016-01-03 


图 9.14 创建 好 的 一 个 模板 消息 


9.5.1 模板 消息 前 端 


小 程序 模板 消息 接口 地 址 为 https://api. weixin. qq. com/cgi-bin/message/wxopen/ 
template/send? access_token 二 ACCESS_TOKEN ,该 模板 消息 接口 的 参数 格式 如 下 : 


| 
"touser" : "openid", 
"template id": "template_id "， 
"page" : "index", 
"form id": "formId", 


"data": { 
"keyword1": { 
"value" : "339208499" 
}, 
"keyword2": { 
"value": "2015 年 01 月 05 日 12:30" 
}, 
"keyword3": { 
"value" : " 粤 海 喜来 登 酒店 " 
Fa 
"keyword4": { 
"value" : "广州 市 天 河 区 天 河 路 208 号 " 
} 
}, 
"emphasis keyword": "keyword1.DATA" 


} 


图 9.14 是 在 小 程序 管理 后 台 创 建 好 的 一 条 微 信 模板 消息 ,以 发 送 图 9.14 中 的 消息 为 
例 , 前 端 需要 提供 图 9.14 中 的 keywordl1、keyword2、keyword3、keyword4、keyword5 和 
keyword6 6 个 关键 词 ; 从 模板 消息 接口 地 址 看 ,小 程序 前 端 需要 提供 ACCESS_TOKEN; 
从 模板 消息 接口 参数 来 看 ,小 程序 前 端 需要 提供 openid、template_id、page 和 formld 等 参 
数 ,这 3 组 参数 共计 11 个 , 绝 大 部 分 应 该 由 前 端 提供 并 发 送 给 后 端 程序 ,其 中 template_id 
和 page 可 以 在 后 端 程序 中 编写 ,也 可 以 由 前 端 小 程序 传递 。 
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回 三 中 交加 


Ea 1734 已 ED 
《 ”服务 通知 春 
联系 人 手机 号 18888888888 
酒店 名 称 妊 豪 大 酒店 进入 小 程序 查看 
门店 地 址 “广东 省 广州 市 越秀 区 东风 中 路 3( 拒 收 通知 
一 
入 住 于 2019-11-00 ~ 高 店 2019-11-01 ~ 
图 大 学 教学 
您 的 姓名 
大 | 订单 支付 成 功 通知 
联系 电话 4554 ee 
酒店 名 称 君 豪 大 酒店 
地 点 广东 省 广州 市 越秀 区 东风 中 路 259 
号 
2019-11-00 
2019-11-01 
陈 生 


3 18888888888 


进入 小 程序 查看 
拒 收 通知 
图 9.15 模板 消息 案例 前 端 图 图 9.16 模板 消息 成 功 发 送 后 微 信 消息 提示 


App-onHide 


图 9.17 Console 控制 台 打印 的 结果 


pages/template/template.wxml 的 代码 如 下 : 


< form report - submit = ‘true' bindsubmit = "formSubmit" bindreset = "formReset"> 
<view class = "add— page"> 
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<view class = "mod— a"> 
<! -- 酒店 名 称 -> 
<view class = "mod 七 一 name"> 
<text class = "key"> 酒 店名 称 </text > 
< input class = "input" maxlength = "100" placeholder = "请 输入 酒店 名 称 " 
bindKeyInput = "bindKeyInput" name = "hotelname"/> 
< image class = "arrow—r" src= ../image/arrow— r -0.png"></image> 


</view> 
</view> 
< View class = "mod 一 a mt20"> 
<! -- 门店 --> 
< view class = "mod t ~ address" bindtap = "chooseLocation"> 
< text class = "key"> 门 店 地 址 </text > 
< text class = "value">{ {address} }</text > 
< image class = "arrow — r" src="../../image/arrow —r -0.png"></image> 
</view> 
</view> 
<view class = "mod 一 a mt20"> 
<! -- 人 和 人 住 时 间 --> 
< View class = "mod 七 一 time"> 
<view class = "start"> 
< text class = "key"> 人 入 住 于 </text > 
< picker mode = "date" value = "{{startDay}}" start= 
"{{startDay}}" bindchange = "startDateChange"> 
<view class = "date">{{startDay} }< image class = "arrow— d" 
src="../../image/arrow— d— 0.png"></image ></view> 
</picker > 
</view> 
<view class = "pipe"></view > 
<view class = "end"> 
< text class = "key"> 离 店 </text > 
<picker mode = "date" value = "{{endDay}}" start = "{{endDay}}" 
bindchange = "endDateChange"> 
<view class = "date">{{endDay} }< image class = "arrow— d" 
src="../../image/arrow— d— 0.png"></image ></view> 
</picker > 
</view> 
</view> 
</view> 
<view class = "mod— a"> 
<1== 外务 =-> 
<view class = "mod t — name"> 
< text class = "key"> 您 的 姓名 </text > 
< input class = "input" maxlength = "100" placeholder = "请 输入 您 的 姓名 " 
bindKeyInput = "bindKeyInput" name = "name"/> 
../image/arrow — r— 0.png"></image> 


< image class = "arrow— r" src= 
</view> 
</view> 
<view class = "mod— a"> 
<! -- 联系 电话 --> 


< View class = "mod t— name"> 
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<text class = "key"> 联 系 电话 </text > 
< input class = "input" maxlength = "100" placeholder = "请 输入 您 的 电话 " 
bindKeyInput = "bindKeyInput" name = "tel"/> 
< image class = "arrow — r" src="../../image/arrow —r -0.png"></image> 
</view> 
</view> 
<! -- 创建 按钮 --> 
<view class = "create"> 
< button class = "btn"” form- type= "submit"> 提 交 </button> 
</view> 
</view></form> 


【代码 讲解 】 为 了 不 打扰 用 户 , 微 信 小 程序 只 能 在 提交 表单 或 者 完成 支付 之 后 才 可 以 
向 用 户 发 送 模板 消息 ,其 他 情况 下 系统 是 不 允许 它 发 送 模板 消息 的 。 本 例 以 提交 表单 为 例 
调用 模板 消息 接口 。 页 面 的 < form > 组 件 的 report-submit 属性 为 true 时 ,表明 需要 发 送 模 
板 消 息 ,此 时 单 击 “提交 ”按钮 提交 表单 可 以 获取 formid 属性 ,如 图 9.17 所 示 ,formid 属性 是 
发 送 模板 消息 必需 的 参数 。 当 小 程序 发 生 支 付 行为 而 调用 模板 消息 时 ,应 先 获 取 prepay_id 作 
为 发 送 模板 消息 的 参数 ,formId 和 prepay_id 是 提交 表单 和 完成 支付 两 种 情况 下 发 送 模板 
消息 所 需要 的 参数 。 

本 例 中 * 酒 店名 称 交 客户 姓名 六 电话 ?由 < input > 组 件 实现 门店 地 址 ? 则 采用 wx 
.chooseLocation() 接 口 由 客户 选择 地 理 位 置 “ 入 住 时 间 ” 和 *“ 离 店 时 间 ” 则 由 < picker > 组 件 

需要 注意 的 是 formid 有 效 期 为 7 天 ,模板 消息 需要 在 表单 提交 之 后 的 7 天 之 内 发 送 ， 
超过 这 个 期 限 则 不 可 以 再 发 送 该 表单 对 应 的 模板 消息 。 

pages/template/template.js 的 代码 如 下 : 


Page({ 

data: { 
hotelname: '', 
address: ' 点 击 选择 地 点 … 
startDay: '2019—11— 00°', 
endDay: '2019—11-01', 
name:null, 
tel:null, 
formid:null, 
openid: '', 
AccessToken:null, 

}, 

// 设 置地 点 

chooseLocation: function() { 
var that = this; 
wx. chooseLocation({ 

success: function(res){ 
console. log(res) 
that. setData({ 
address: res.address, 


]) 
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}, 
fail: function() { 
//fail 
}, 
complete: function() { 
//complete 
} 
}) 
}, 
// 设 置 开始 日 期 
startDateChange: function(e) { 
this. setData({ 
startDay: e. detail. value 
}) 
}, 
// 设 置 结束 日 期 
endDateChange: function(e) { 
this. setData( { 
endDay: e. detail. value 
}) 
}, 
onLoad: function() 
{ 
var that = this; 
wx. request({ 
url: 'http://localhost:8080/wxtemplate/getAccessToken', 


// 改 成 自己 的 服务 器 地 址 
data: { 
}, 
header: { 
'content — type': 'application/json' // 默 认 值 


}, 
success: function(res) { 
console. log("getAccessToken 的 ---- ”+ res. data.access_token) 
that. setData({ 
AccessToken: res. data.access_token 
}) 
} 
}) 
wx. login( { 
success: function(res) { 
console. log( 'code:' + res.code) 
// 发 送 请 求 
wx. request ({ 
url: 'http://localhost:8080/wxtemplate/loginservlet', 
// 改 成 自己 的 服务 器 地 址 
data: { 
code: res. code, // 上 面 的 wx. login( ) 成 功 获取 的 code 
operFlag: 'getOpenid', 
}, 


header: { 
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'content - type': 'application/json' // 默 认 值 
} 
success: function(res) { 
console. log("getopenid—--—" + res. data. openid) 
that. setData({ 
openid: res. data. openid 
}) 


}) 


}, 
// 发 送 模板 
formSubmit: function(e) { 
console. log(e) 
this. setData( { 
nanme:e. detail. value. name, 
hotelname: e. detail. value. hotelname, 
tel: e. detail.value. tel, 
formid: e. detail. formId 


}) 
wx. request({ 
url: 'http://localhost:8080/wxtemplate/sendmessage', // 改 成 自己 的 服务 器 地 址 
//method: "POST"， 
data: { 
ACCESS_TOKEN: this. data. AccessToken, 
openid:this. data. openid, 
formid:"e2e30c878c3a4cd189e4199416319021", 
keyword11: this. data. hotelname, 
keyword21: this. data. address, 
keyword31: this. data. startDay, 
keyword41 : this. data. endDay, 
keyword51: this. data. name, 
keyword61: this. data. tel 
}, 


header: { 


'content — type': 'application/json' // 默 认 值 
}, 
success: function(res) { 


console. log(" 模 板 消息 发 送 成 功 ---- ”+ res. data) 


}) 


【代码 讲解 】 本 例 使 用 wx.chooseLocation() 接 口 获取 地 理 位 置 的 名 称 res.address 作 
为 “门店 地 址 ”, 函数 startDateChange 和 endDateChange 获取 < picker > 组 件 的 值 赋值 给 入 
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住 时 间 startDay 和 离 店 时 间 endDay 。 

onLoad 函数 完成 了 openid 和 access_token 的 获取 。openid 的 获取 可 以 参看 例 9-3。 
access_token 是 后 台 接 口 调用 凭据 ,小 程序 调用 绝 大 多 数 后 台 接口 时 都 需 使 用 access_ 
token, 开 发 者 需要 妥善 保存 。access_token 的 小 程序 官方 获取 接口 地 址 为 https://api. 
weixin.qq.com/cgi-bin/token? grant_type= client eredentiolt:appid = APPID&.secret = 
APPSECRET ,其 请 求 方式 和 openid 的 请 求 方式 类 似 , 其 返回 数据 示例 如 下 : 

正常 时 返回 : 


{"access_token" :"ACCESS_TOKEN", "expires_in" :7200} 
错误 时 返回 
{"errcode" :40013, "errmsg" :"invalid appid"} 


在 调试 本 例 程序 的 时 候 , 需 要 掌握 一 定 的 技巧 才能 出 现 如 图 9.16 所 示 的 发 送 模 板 消 息 
成 功 的 结果 ,技巧 在 于 要 先 使 用 真 机 调试 得 到 如 图 9.17 所 示 的 formid, 然 后 再 把 得 到 的 具 
体 的 formid 作为 发 送 模板 消息 的 参数 ,并 且 要 用 模拟 器 调试 。 其 中 的 道理 在 于 模拟 器 调试 
是 不 会 产生 formid 的 ,要 获取 formid 只 能 进行 真 机 调试 ,而 真 机 调试 又 不 能 访问 本 例 中 JS 
文件 中 的 后 端 接口 ,因为 本 例 中 的 所 有 的 后 端 接口 都 没有 部 署 在 网 络 上 ,而 是 在 本 地 的 
Tomcat 地 址 ,所 以 真 机 调试 或 者 模拟 器 调试 在 本 例 中 都 不 能 看 到 模板 消息 发 送 成 功 的 结 
果 , 但 如 果 程序 部 署 到 了 网 络 上 就 不 存在 此 类 问题 了 。 


9.5.2 ”模板 消息 后 端 


圆 "-9 模板 消息 的 发 送 是 需要 后 端 程序 配合 的 ,本 例 是 例 9-8 的 后 
端 部 分 。 图 9.18 为 后 端 项 目 结构 图 ,项 目 中 包含 getAccessToken.java、 
loginservlet.java、sendmessage.java 和 tool.java 4 个 文件 ,其 中 前 3 个 文件 
本 本 为 Servlet 文件 ,tool.java 为 普通 工具 类 。 后 端 项 目 在 Console 中 的 打印 结 
视频 讲解 。 果 如 图 9.19 所 示 。 后 端 程序 正确 的 情况 下 ,模板 消息 可 以 如 图 9.16 所 示 成 


~ 留 wxtamplate 
> 0 Deployment Descriptor: wxtamplate 
» ® Deployed Resources 


> Bh JavaScript Resources 尿 problems 鹤 Tasks (EIEN es Workspace Migratio' 
“te Tomeat 8.0 Seryer at ocalhost IMyEclipse Sever] DAjava 
v 出 serviet Tontent-Length- 
» YD getAccessTokenjava Content-Type-- ts 


》 回 loginservietjava Connection--->[keep-alive] 


> Bsendmeseage jm results{"session_key":"QN+He4Vj+D7NTF2BXYRKxw=| 
DD tooljava url=https://api.weixin.qq.com/cgi-bin/message/ 
> 2 keyword21=- 省 广州 市 越秀 区 东风 中 路 259 号 
> mh JRE System Library [jdk17] keyword31----2619-11-60 
> mh Apache Tomcat v8.0 [Apache Tomcat vi keyword61====18888888888 
> a JSTL 1.2.1 Library keyword21++++ 广 东 省 广州 市 越秀 区 东风 中 路 259 号 


» BE WebRoot keyword31++++2619-11-99 


图 9.18 模板 消息 案例 后 端 图 9.19 ”Console 控制 台中 的 打印 结果 
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loginservlet.java 的 代码 和 例 9-4 中 的 loginservlet.java 代码 一 样 ,读者 可 以 参考 例 9-4 
代码 。 
src/servlet/getAccessToken.java 的 代码 如 下 : 


package servlet; 
import java. io. BufferedReader; 
import java. io. IOException; 
import java. io. InputStreamReader; 
import java. io. PrintWriter; 
import java. net. URL; 
import java. net. URLConnection; 
import java. util. List; 
import javax. servlet. ServletException; 
import javax. servlet. annotation. WebServlet; 
import javax. servlet. http. HttpServlet; 
import javax. servlet. http. HttpServletRequest; 
import javax. servlet. http. HttpServletResponse; 
/xxx Servlet implementation class loginservlet */ 
@WebServlet("/getAccessToken") 
public class getAccessToken extends HttpServlet { 
private static final long serialVersionUID = 1L; 
private String appid = "wx800eb4451b223c35"; 
private String secretKey = "c618f0eld9038d956bc405c9a0a837d1"; 
@oOverride 
protected void doGet ( HttpServletRequest req, HttpServletResponse resp) throws 
ServletException, IOException { 
Systeon, oot. DER 人 dBeE 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 “5 
doPost (req, resp); 
} 
@Override 
protected void doPost (HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
System. out. println("doPost 一 一 


String results = 站 

String url = "https://api. weixin. qq.com/cgi— bin/token?grant type= 
client credential&appid= " + appid+ "&secret = " + secretKey; 

System. out. println("url" + url); 

results = tool. sendGetReq(url); // 发 送 HTTP 请 求 

System. out. println("AccessToken 是 " + results); 

response. setContentType( "application/json;charset = UTF — 8"); 

response. setHeader( "catch - control", "no catch"); 

PrintWriter out = response.getWriter(); 

out. write( results); 

out. flush( ); 


out. close( ); 
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【代码 讲解 】 getAccessToken.java 是 一 个 Servlet 文件 。 文 件 中 tool.sendGetReq() 本 
数 和 例 9-4 中 的 tool.sendGetReq() 是 同一 函数 。 本 文件 功能 是 获取 access_token,access_ 
token 的 接口 地 址 是 https://api. weixin. qq. com/cgi-bin/token? grant_ type 二 client_ 
credential&appid 二 APPID&.secret 二 APPSECRET ,该 接口 需要 appid 和 secretKey 两 个 对 
象 作为 参数 。 

src/servlet/sendmessage.java 的 代码 如 下 : 


protected void doPost (HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 
String ACCESS_ TOKEN = request. getParameter("ACCESS TOKEN"); 
String tmpurl = "https://api.weixin.qq. com/cgi- bin/message/wxopen 
/template/send?access_token = " + ACCESS_ TOKEN; 
System. out. println("url = "+ tmpurl); 
JSONObject json = new JSONObject(); 
String openid = request. getParameter( "openid"); 
String templat_id= "hlfC496na3I BCd17bSA4a2 - 2 m0g2qjFko - hGkMtf4"; 
String pageurl = "m. baidu. com"; 
String formId = request. getParameter("formId" ); 
String keyword11 = request. getParameter("keyword11"); 
String keyword21 = request. getParameter("keyword21"); 
"+ keyword21); 
String keyword31 = request. getParameter( "keyword31" ); 


System. out. println("keyword21 = 


System. out. println("keyword31 ==== " + keyword31); 


String keyword41 = request. getParameter("keyword41" ); 
String keyword51 = request. getParameter ("keyword51" ); 
String keyword61 = request. getParameter ("keyword61" ); 
"+keyword61); 
JSONObject data = tool. packJsonmsg(keyword11, keyword21, keyword31, keyword41, 
keyword51, keyword61); 
try { 
json. put( "touser", openid); 


System. out. println("keyword61 = 


json. put("template id", templat id); 
json. put("page", pageurl); 
json. put("form id", formId); 
json. put("data", data); 
} catch (JSONException e) { 
e. printStackTrace( ); 
} 
String result = tool.httpsRequest(tmpurl, "POST", json. toString()); 
//System. err. println(result); 
//return "success"; 
response. setContentType("application/json;charset = UTF — 8"); 
response. setHeader( "catch - control", "no~ catch"); 
PrintWriter out = response.getWriter(); 
out. write( result); 
out. flush( ); 


346 


第 9 章 。” 交互 接口 和 开放 接口 


out. close() 


} 


【代码 讲解 】 sendmessage.java 的 代码 由 两 部 分 组 成 。 前 半 部 分 是 接收 小 程序 前 端 传 
递 过 来 的 多 个 参数 ,并 形成 9.5.1 节 中 的 模板 消息 标准 格式 的 参数 。 在 形成 模板 消息 标准 
格式 参数 的 过 程 中 ,调用 了 tool.java 中 的 packJsonmsg 函数 ,packJsonmsg 负责 把 小 程序 
前 端 传递 过 来 的 keyword11、keyword21、keyword31、keyword41、keyword51 和 keyword61 
封装 成 标准 格式 参数 的 data 部 分 。 后 半 部 分 是 向 模板 消息 接口 发 起 请 求 , 并 形成 JSON 格 
式 结果 返回 给 前 端 小 程序 。 

src/servlet/tool.java 的 代码 如 下 : 


public static JSONObject packJsonmsg(String keyword11，String keyword21, String keyword31, 
String keyword41, String keyword51, String keyword61){ 
JSONObject json = new JSONObject(); 
try{ 
JSONObject keyword1 = new JSONObject(); 
keyword1. put("value", keyword11); 
keyword1. put("color", "#173177"); 
json. put ("keyword1", keyword1); 
JSONObject keyword2 = new JSONObject(); 
keyword2. put ("value", keyword21); 
keyword2. put ("color", "#173177"); 
json. put ("keyword2", keyword2); 
System. out. println("keyword21++++" + keyword21 ); 
JSONObject keyword3 = new JSONObject(); 
keyword3. put ("value", keyword31); 
keyword3. put ("color", "#173177"); 
json. put ("keyword3", keyword3); 
System. out. println("keyword31++++" + keyword31); 
JSONObject keyword4 = new JSONObject(); 
keyword4. put ("value", keyword41); 
keyword4. put("color", "#173177"); 
json. put ("keyword4", keyword4); 
JSONObject keyword5 = new JSONObject(); 
keyword5. put ("value", keyword51); 
keyword5. put("color", "#173177"); 
json. put ("keyword5", keyword5); 
JSONObject keyword6 = new JSONObject(); 
keyword6. put ("value", keyword61); 
keyword6. put ("color", "#173177"); 
json. put ("keyword6", keyword6); 
} catch (JSONException e) { 
e. printStackTrace( ); 
} 


return json; 
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【代码 讲解 】 tool.java 的 核心 函数 为 packJsonmsg(),packJsonmsg() 函 数 , 它 把 小 程 
序 前 端 传递 过 来 的 keyword11、keyword21、keyword31、keyword41、keyword51 和 
keyword61 封装 成 模板 消息 标准 格式 参数 的 data。 


9.6 权限 接口 


部 分 接口 需要 经 过 用 户 授 权 同 意 才能 调用 。 我 们 把 这 些 接口 按 使 用 范围 分 成 多 个 
scope, 用 户 选 择 对 scope 进行 授权 , 当 授 权 给 一 个 scope 之 后 ,其 对 应 的 所 有 接口 都 可 以 直 
接 使 用 。 此 类 接口 调用 时 : 

(1) 如 果 用 户 未 接受 或 拒绝 过 此 权限 ,会 弹 窗 询问 用 户 ,用 户 单 击 同意 后 方 可 调用 
接口 。 

(2) 如 果 用 户 已 授权 ,可 以 直接 调用 接口 。 

(3) 如 果 用 户 已 拒绝 授权 , 则 不 会 出 现 弹 窗 ,而 会 直接 进入 接口 fail 回调 。 

此 类 接口 在 权限 中 的 对 象 scope 的 字段 和 接口 的 对 应 关系 如 表 9.9 所 示 。 


表 9.9 scope 列表 


scope 对 应 接口 描 述 
scope.userInfo wx.getUserInfo 用 户 信息 
scope.userLocation wx.getLocation, wx.chooseLocation 地 理 位 置 
scope.userLocationBackground | wx.userLocationBackground 后 台 定位 
scope.address wx.chooseAddress 通信 地 址 
scope.invoiceTitle wx.chooselInvoiceTitle 发 票 抬头 
scope.invoice wx.chooseInvoice 获取 发 票 
scope. werun wx.getWeRunData 微 信 运动 步 数 
scope.record wx.startRecord 录音 功能 
scope. writePhotosAlbum wx.savelImageToPhotosAlbum ,wx.saveVideoToPhotosAlbum | 保存 到 相册 
scope.camera camera 组 件 摄像 头 


小 程序 提供 了 3 组 接口 对 接口 权限 进行 相应 的 操作 : wx.getSetting() 获 取 用 户 当 前 的 
授权 状态 ; wx.openSetting() 打 开设 置 界面 以 引导 用 户 开 启 授权 ; wx.authorize() 改 变 授权 


9.6.1 用 户 授权 接口 wx.authorize() 


该 接口 调用 后 会 立刻 弹 窗 询问 用 户 是 否 同意 授权 小 程序 ,使 用 某 项 功能 或 获取 用 户 的 
某 些 数据 ,但 不 会 实际 调用 对 应 接口 。 如 果 用 户 之 前 已 经 同意 授权 , 则 不 会 出 现 弹 窗 ,直接 
返回 成 功 。 

示例 代码 : 


wx. getSetting({ 
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success(res) { 
证 (!res.authSetting[ 'scope. record']) { 
wx. authorize({ 
scope: 'scope. record '， 
success() { 
// 用 户 已 经 同意 小 程序 使 用 录音 功能 ,后 续 调 用 wx. startRecord 接口 不 会 弹 窗 询问 


wx. startRecord( ) 


9.6.2 ”获取 用 户 权 限 设置 接口 wx.getSetting() 


该 接口 获取 用 户 的 当前 设置 。 返 回 值 中 只 会 出 现 小 程序 已 经 向 用 户 请 求 过 的 权限 。 
示例 代码 : 


wx. getSetting({ 
success(res) { 
console. log(res. authSetting) 
//res.authSetting = { 
// "scope.userInfo": true, 
// "scope.userLocation": true 
//} 
} 
}) 


9.6.3 ”打开 用 户 权限 设置 界面 接口 wx.openSetting() 


该 接口 调用 客户 端 小 程序 设置 界面 ,返回 用 户 设置 的 操作 结果 。 设 置 界面 只 会 出 现 小 
程序 已 经 向 用 户 请 求 过 的 权限 。 

注意 : 2.3.0 版 本 开始 ,用 户 发 生 点 击 行为 后 , 才 可 以 跳 转 打开 设置 页 ,管理 授权 信息 

示例 代码 : 


Wx. openSetting({ 
success(res) { 
console. log( res. authSetting) 
//res.authSetting = { 
// "scope.userInfo": true, 
// "scope.userLocation": true 


//} 
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[加 9-10 本 例 使 用 获取 地 理 位 置 接口 wx.getLocation() 和 开始 录音 
接口 wx.startRecord() 进 行 相关 操作 ,而 这 两 个 接口 都 需要 设置 操作 权限 。 
图 9.20 是 使 用 wx.authorize( ) 接 口 对 位 置 操作 进行 授权 ; 图 9.21 是 使 用 
js 
视频 讲解 wx.openSetting() 接 口 对 录音 操作 进行 授权 。 


开始 录音 录音 功能 '@ \ 


WwWxid_6efo5zatas2v21 的 接 
口 测试 号 需要 获取 你 的 地 
理 位 置 


你 的 位 置信 息 将 用 于 小 程序 位 
置 接口 的 效果 展示 


不 允许 人 允许 


图 9.20 ”wx.authorize() 接 口授 权 图 9.21 wx.openSetting() 接 口授 权 


pages/authorize&.Setting/authorize&Setting.wxml 的 代码 如 下 : 


< view class = "body" bindtap = "location1"> 获 取 地 理 位 置 </view> 
<view class= "body">{{context}}</view> 
<view class = "body" bindtap = "location2"> 开 始 录 音 </view> 


pages/authorize&.Setting/authorize&.Setting.js 的 代码 如 下 : 


Page({ 
onLoad: function() { 
Context: 
}, 
locationl:function(){ 
var that = this 
wx. getSetting({ 
success(res) { 
console. log(res) 
if (tres.authSettingf 'scope. userLocation']) { 
wx. authorize({ 
scope: 'scope.userLocation'， 
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success() { 
wx. getLocation({ 
success: function(res) { 
console. log(res) 
that. setData({ context: "你 所 在 的 经 度 是 ”+ res. latitude + "你 所 在 的 纬度 
是 " + res. longitude}) 


location2: function() { 
wx. getSetting({ 
success(res) { 
console. log(res. authSetting) 
if (!res.authSetting[ 'scope.record']) { 
wx. openSetting({ 
success(res) { 
console. log(res) 
wx. startRecord({ 
success(res) { 
const tempFilePath = res.tempFilePath 
console. log( "录音 结束 ") 


}) 


【代码 讲解 】 location1() 函数 实现 获取 地 理 位 置 的 功能 ,该 函数 先 调用 wx.getSetting() 
接口 获取 权限 状态 ,然后 调用 wx.authorize() 接 口 修改 地 理 位 置 权 限 scope.userLocation 。 
location2() 函 数 实现 录音 功能 ,该 函数 先 调 用 wx.getSetting() 接 口 获取 权限 状态 ,然后 调用 
wx.openSetting() 接 口 打开 录音 权限 设置 界面 来 修改 录音 权限 。 从 本 例 可 以 看 出 设置 权限 
的 时 候 应 该 先 调用 wx.getSetting() 接 口 获取 权限 状态 ,在 权限 没有 打开 的 情况 下 可 以 调用 
wx.authorize() 接 口 或 者 wx.openSetting() 接 口 来 修改 权限 状态 ,wx.authorize() 接 口 不 出 
现 修改 权限 的 操作 界面 ,而 wx.openSetting() 接 口 会 出 现 修改 权限 的 操作 界面 。 


9.7 微 信 运 动 接 口 wx.getWeRunData() 


该 接口 获取 用 户 过 去 30 天 微 信 运动 步 数 。 该 接口 比较 复杂 ,具体 操作 步骤 如 下 : 
(1) 先 调 用 wx.login() 接 口 获取 code。 
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(2) 使 用 wx.request() 接 口 向 地 址 https://api.weixin. qq.com/sns/jscode2session? 
appid 一 appid&ssecret 王 SECRET&js_code 王 JSCODER&grant_type 一 authorization_code 发 
送 网 络 请 求 ,此 时 需要 发 送 appid secret 和 code 3 个 参数 ,返回 session_key。 

(3) 调用 wx.getWeRunData() 接 口 返回 encryptedData 和 iv, 其 中 encryptedData 是 加 
密 的 步 数 信息 ,需要 解密 为 明文 。 

(4) 在 小 程序 中 使 用 CryptoJS 组 件 对 encryptedData 进行 解密 ,此 时 需要 用 到 appid、 
session_key 和 iv, 解密 得 到 明文 的 步 数 信息 是 小 程序 的 可 读 信息 。 

[ 吏 9-11 本 例 使 用 wx.getWeRunData() 接 口 获取 用 户 的 运动 步 数 并 显示 ,程序 运行 
结果 如 图 9.22 所 示 , 如 图 9.23 所 示 的 项 目 结构 中 的 虚线 框 选中 的 文件 是 引入 的 CryptoJS 
组 件 文件 ,该 组 件 可 以 在 https://www.npmjs.com/package/crypto-js 下 载 得 到 。 


运动 了 3488 步 
动 了 1236 步 


视频 讲解 


六 a 


DataCryptJs 
D README md 


IO 天 前 你 运动 了 3380 步 
BP 天 前 你 运动 了 3731 步 
B 天 前 你 运动 了 3554 步 
天 前 你 运动 了 3075 步 


图 9.22 获取 的 微 信 运 动 步 数 图 9.23 项 目 结构 


人 projectconfig json 
{) sitemapjson 


-/ -utils/DataCrypt.js 的 代码 如 下 : 


var Crypto = require('cryptojs. js'). Crypto; 

var app = getApp(); 

function RdWXBizDataCrypt (appid, sessionKey) { 
this. appid = appid 
this. sessionKey = sessionKey 

} 

RdWXBizDataCrypt. prototype. decryptData = function (encryptedData, iv) { 
var encryptedData = Crypto.util.base64ToBytes(encryptedData) 
var key = Crypto. util.base64ToBytes(this. sessionKey); 
var iv = Crypto.util.base64ToBytes(iv); 
var mode = new Crypto. mode. CBC(Crypto. pad. pkcs7); 
try { 
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var bytes = Crypto.AES. decrypt(encryptedData, key, { 
asBpytes:true, 
iv: iv 
mode: mode 

]) 

var decryptResult = JSON.parse(bytes); 

} catch (err) { 
console. log(err) 


} 
if (decryptResult. watermark. appid !== this.appid) { 


console. log(err) 


} 


return decryptResult 


} 
module. exports = RdWXBizDataCrypt 


pages/pages/getWeRunData/getWeRunData.wxml 的 代码 如 下 : 
< view wx:for="{{stepInfoList}}">{{30 - index}} 天 前 你 运动 了 {{item. step}} 步 </view> 


pages/getWeRunData/getWeRunData.js 的 代码 如 下 : 


var DataCrypt = require('../../utils/DataCrypt. js'); 
Bage({ 
data: { 
stepInfoList:[] 
}, 
onLoad: function(options) { 
var that = this; 
wx. login( { 
success: function(res) { 
var appid = "wx800eb4451b223c35"; 
var secret = "8a854735cldea5dab2b0c09b6c4ab6b0"; 
if (res.code) { 
wx. request({ 
url: 'https://api. weixin. qq. com/sns/jscode2session?appid = ' + 
appid + '&secret =' + secret + '&js code=' + res.code + 
'&grant_ type = authorization code'’, 
header: { 'content ~ type': 'json' }, 
success: function(res) { 
Var session key = res.data. session key; 
console. log(session key); 
that. getWeRunData(appid, session key); } 
}) 
} 
} 
}) 
}, 
// 获 取 encryptedData( 没 有 解密 的 步 数 ) 和 iv( 加 密 算法 的 初始 向 量 ) 
getWeRunData: function(appid, session key) { 
var that = this 
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wx. getSetting({ success: function (res) { 
console. log(res); 
if (!res.authSetting[ 'scope. werun']) 
{wx. showModal 
({ 
title: ' 权 限 提示 ' 
content: "获取 微 信 运动 步 数 需要 开启 计 步 权限 ' 
success: function(res) 
{ 
if (res.confirm) { 
// 跳 转 去 设置 
wx. openSetting({ 
Success: function(res) 
{} 
}) 
} 
} 
}) 
} else{ 
wx. getWeRunDatal( { 
success: function(res) { 
console. log(res); 
var encryptedData = res.encryptedData; 
var iv = res. iv; 
var pc = new DataCrypt(appid, session key); 
console. log(pc); 
var data = pc. decryptData(encryptedData，iv) 
console. 1og(" ——-——— " + data. stepInfoList[0]. step) 
that. setData( { 
stepInfoList: data. stepInfoList}) 
}, 
fail: function(res) { console. 1og(" 获 取 数 据 失败 ") } 
}) 


}) 


【代码 讲解 】 本 例 中 CryptoJS 组 件 属于 网 络 开源 项 目 . 下 载 之 后 需要 按 图 9.23 所 示 
引入 到 小 程序 项 目 中 , DataCrypt.js 文件 的 作用 是 把 CryptoJS 组 件 引 入 到 小 程序 项 目 。 
wx.getWeRunData() 接 口 获 取 的 encryptedData 经 过 CryptoJS 组 件 解密 之 后 得 到 的 明文 数 
据 data 中 包含 了 微 信 运动 数据 .具体 的 数据 在 data 的 stepInfoList 数组 中 ,该 数组 共 31 条 
记录 ,对 应 当日 和 前 30 天 的 运动 步 数 数据 。 其 中 ,stepInfoListL0] 是 30 天 前 的 运动 步 数 数 
据 ,stepInfoListL30] 是 当日 的 运动 步 数 数据 。 
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9.8 其 他 常见 开放 接口 


本 章 前 七 节 介绍 了 微 信 登录 wx.login() 、 微 信 支 付 wx.requestPayment() ,获取 微 信 信 
息 wx.getUserInfo() 和 模板 消息 template 等 高 级 开放 接口 。 除 此 之 外 ,小 程序 还 有 多 个 开 
放 接 口 ,因为 篇 幅 所 限 ,本 节 将 介绍 小 程序 间 跳 转 wx.navigateToMiniProgram()、 获 取 用 户 
收 货 地 址 wx.chooseAddress() 和 指纹 认证 SOTER 3 个 开放 接口 。 


9.8.1 小 程序 间 跳 转 接 口 wx.navigateToMiniProgram () 


小 程序 可 以 通过 wx.navigateTo() 和 wx.redirectTo() 接 口 实现 页 面 之 间 的 跳 转 ,小 程 
序 还 提供 了 wx.navigateToMiniProgram() 接 口 实现 当前 小 程序 跳 转 到 另 一 个 小 程序 的 功 
能 。 表 9.10 是 wx.navigateToMiniProgram() 的 属性 表 。 
表 9.10 wx.navigateToMiniProgram() 属 性 表 
属 性 | 类 型 | 必 填 说 明 
要 打开 的 小 程序 appid 


各 


appid string 


打开 页 面 路 径 , 如 果 为 空 则 打开 首页 。path 中 “?” 后 面 的 部 分 会 成 
为 query, 在 小 程序 的 App.onLaunch、App.onShow 和 Page.onLoad 的 
path string 否 回调 函数 或 小 游戏 的 wx onShow 回调 函数 、wx. 
getLaunchOptionsSync 中 可 以 获取 query 数据 。 对 于 小 游戏 ,可 以 
只 传人 query 部 分 ,来 实现 传 参 效果 ,例如 传人 "? foo= bar" 


需要 传递 给 目标 小 程序 的 数据 ,目标 小 程序 可 在 App.onLaunch、 
extraData object 否 App.onShow 中 获取 这 份 数 据 ; 如 果 跳 转 的 是 小 游戏 ,可 以 在 wx 
.onShow 、wx.getLaunchOptionsSync 中 获取 这 份 数据 


要 打开 的 小 程序 版 本 , 仅 在 当前 小 程序 为 开发 版 或 体验 版 时 此 参 


envVersion String 否 数 有 效 。 如 果 当 前 小 程序 是 正式 版 , 则 打开 的 小 程序 必定 是 正 
式 版 

success function 否 接口 调用 成 功 的 回调 函数 

fail function 否 接口 调用 失败 的 回调 函数 


complete function 否 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


appid 属性 是 需要 打开 的 小 程序 的 appid, 如 果 是 打开 自身 的 页 面 则 appid 留 空 。path 
属性 为 要 打开 的 小 程序 的 具体 页 面 , 即 打开 操作 可 以 具体 到 被 打开 的 小 程序 的 某 一 页 面 。 
extraData 是 需要 传递 给 目标 小 程序 的 参数 。envVersion 的 取 值 为 develop trial 和 
release, 它 们 分 别 代表 开 发 版 .体验 版 和 正式 版 ,因为 一 个 appid 代表 一 个 小 程序 ,而 小 程序 
有 开发 版 ,体验 版 和 正式 版 3 个 版 本 。 
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[ 男 ] 9-12 本 例 wx.navigateToMiniProgram() 接 口 从 当前 小 程序 跳 转 到 另外 一 个 小 程 
序 ,程序 运行 效果 如 图 9.24 所 示 。 


即将 打开 “ 捕 鱼 大 奖 赛 "小 程序 


取消 允许 


图 9.24 小 程序 间 跳 转 
pages/navigateToMiniProgram/navigateToMiniProgram.wxml 的 代码 如 下 : 


<view class = "container"> 
< view class = "userinfo"> 
< button wx: if ="{{!hasUserInfo && canIUse}}" open 一 type= "getUserInfo" 
bindgetuserinfo = "getUserInfo"> 获取 头像 昵称 </button > 
<block wx:else> 
< image bindtap = "bindViewTap”class = "userinfo ~ avatar" 
src="{{userInfo. avatarUrl}}" mode = "cover"></image> 
< text class = "userinfo - nickname">{ {userInfo. nickName} }</text > 
</block > 
</view> 
<view class = "usermotto" bindtap= 'dian'> 
< text class = "user - motto"> 跳 转 到 " 捕 鱼 大 奖 赛 "小 程序 </text > 
</view> 
</view> 


pages/navigateToMiniProgram/navigateToMiniProgram.js 的 代码 如 下 : 
Page({ 
dian:function(e){ 


wx. navigateToMiniProgram( { 
appid: "wx3efb95b9c5579418'， 


356 


第 9 章 ”交互 接口 和 开放 接口 


path: '', 
extraData: { 
foo: "bar' 
}, 
envVersion: 'release'， 
success(res) { 


// 打 开 成 功 


【代码 讲解 】 在 项 目 中 要 打开 的 外 部 小 程序 需要 在 全 局 JSON 文件 app.json 中 添加 
navigateToMiniProgramAppIdList 属性 的 配置 信息 ,把 需要 跳 转 过 去 的 小 程序 的 appid 列 
在 该 属性 内 ,如 下 面 代码 所 示 : 

"navigateToMiniProgramAppIdList":[ 

"wx3efb95b9c5579418", 
"wxc1039e003593f9b4", 


"wxc75cac912af33647" 
] 


9.8.2 ”获取 用 户 收 货 地 址 接口 wx.chooseAddress() 


wx.chooseAddress(Object object) 获 取 用 户 收 货 地 址 ,此 接口 调用 的 是 微 信 的 收 货 地 
址 。 微 信 收 货 地 址 不 同 于 微 信 设 置 的 省 和 市 地 址 , 它 默 认 是 不 存在 的 。 在 某 个 小 程序 中 , 当 
用 户 第 一 次 调用 wx.chooseAddress() 接 口 时 ,会 被 要 求 填 写 微 信 收 货 地 址 ; 当 用 户 第 二 次 
访问 wx.chooseAddress() 接 口 时 , 则 可 以 看 到 自己 以 前 填写 的 收 货 地 址 。 这 里 说 的 第 二 次 
可 以 是 不 同 的 小 程序 ,例如 用 户 在 访问 A 小 程序 时 填写 了 微 信 收 货 地 址 , 则 用 户 在 访问 带 
有 wx.chooseAddress() 接 口 的 B 或 者 C 小 程序 时 都 可 以 看 到 以 前 填写 的 微 信 收 货 地 址 。 
wx.chooseAddress() 接 口 属性 如 表 9.11 所 示 。 


表 9.11 wx.chooseAddress() 属 性 表 


属 性 类 型 说 明 
userName string 收 货 人 姓名 
postalCode string 邮编 
provinceName String 国标 收 货 地 址 第 一 级 地 址 
cityName String 国标 收 货 地 址 第 二 级 地 址 
countryName string 国标 收 货 地 址 第 三 级 地 址 
detaillnfo string 详细 收 货 地 址 信息 
nationalCode string 收 货 地 址 国家 码 
telNumber string 收 货 人 手机 号 码 
errMsg string 错误 信息 
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[ 贺 %-13 本 例 使 用 wx.chooseAddress(Object object) 获 取 微 信 收 货 
地 址 ,并 把 获取 的 收 货 地 址 信息 填 人 图 9.25 的 表单 。 因 为 是 第 一 次 访问 
wx.chooseAddress() 接 口 , 所 以 点 击 * 获 取 收 货 地 址 ”按钮 之 后 ,出 现 了 新 建 
并 保存 收 货 地 址 页 面 , 如 图 9.26 所 示 。 当 用 户 点 击 图 9.26 右上 角 的 “保存 ” 
按钮 时 ,系统 获取 了 微 信 收 货 地 址 并 填 入 表单 ,如 图 9.27 所 示 。 


< 站 


收 货 人 陈 生 二 收 货 人 姓名 ” 陈 生 
邮编 523000 
手机 号 码 18888888888 
地 区 广东 省 东莞 市 南城 街道 


地 区 信息 广东 省 


南城 街道 9 


收 货 地 址 。 中山 大道 78 号 
详细 地 址 “中山 大道 78 号 


国家 码 441902 
邮政 编码 ”523000 
手机 号 码 。 “18888888888 


获取 收 货 地 址 


获取 收 货 地 址 


图 9.25” 收 货 地 址 信 


图 9.26 ”新建 并 保存 微 信 收 货 地 址 图 9.27 微 信 收 货 地 址 被 填 人 表单 


pages/chooseAddress/chooseAddress.wxml 的 代码 如 下 : 


<view class = "container"> 
<form> 
<view class = "page — section"> 
<view class = "weui - cells weui- cells after 一 title"> 
<view class = "weui - cell weui- cell input"> 
< view class = "weui— cell_ hd"> 
< view class = "weui 一 label"> 收 货 人 姓名 </view> 
</view> 
<view class = "weui - cell bd"> 
{{ addressInfo. userName }} 
</view> 
</view> 
<view class = "weui - cell weui— cell input"> 
<view class = "weui— cell hd"> 
<view class = "weui - label"> 邮 编 </view> 
</view> 
<view class = "weui - cell bd"> 
{{ addressInfo. postalCode }} 
</view> 
</view> 


<view class = "weui - cell weui- cell input region"> 
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< view class = "weui - cell_ hd"> 


<view class = "weui - label"> 地 区 </view> 
</view> 


< view class = "weui - cell bd"> 
{{ addressInfo. provinceName }} 
{{ addressInfo. cityName }} 
{{ addressInfo. countyName }} 
</view> 


</view> 


< view class = "weui - cell weui - cell_input detail"> 
< view class = "weui - cell_hd"> 


<view class = "weui 一 label"> 收 货 地 址 </view> 
</view> 


<view class = "weui - cell bd"> 
{{ addressInfo. detailInfo }} 
</view> 


</view> 


<view class = "weui— cell weui- cell input"> 
<view class = "weui - cell_hd"> 
<view class = "weui - label"> 国 家 码 </view> 
</view> 
<view class = "weui— cell bd"> 
{{ addressInfo. nationalCode }} 
</view > 


</view> 


<view class = "weui— cell weui- cell input"> 
<view class = "weui— cell_ hd"> 
<view class = "weui - label"> 手 机 号 码 </view> 
</view> 
<view class = "weui - cell bd"> 
{{ addressInfo. telNumber }} 
</view> 
</view> 
</view> 
</view> 
</form> 


<view class = "btn—area" hidden="{{chooseAddress}}"> 


< button type = "primary”bindtap = "chooseAddress"> 获 取 收 货 地 址 </button> 
</view> 


<view class="btn— area" hidden="{{!chooseAddress}}"> 


< button type = "primary” bindtap = "pay"> 提 交 </button > 
</view> 


</view> 


pages/chooseAddress/chooseAddress.js 的 代码 如 下 : 


Page({ 
data: { 
addressInfo: null, 
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ChooseAddress:false 


}, 
chooseAddress:function(e){ 
var that = this; 
wx. chooseAddress( { 
success: function(res){ 
that. setData( { 


addressInfo: res, 
chooseAddress: true 
}) 
天 
fail: function(err) { 
console. log(err) 
} 
}) 
和 
pay:function(e){ 
wx. navigateTo( { 
url: '../pay/pay' 
}) 
} 

]}) 

【代码 讲解 〗 通过 本 例 可 以 发 现 收 货 地 址 信息 的 userName、postalCode、 
provinceName cityName countryName detailInfo nationalCode telNumber 和 errMsg 属 
性 都 包含 在 addressInfo 对 象 中 。wx.chooseAddress() 常 在 电 商 类 小 程序 中 被 引用 。 

wx.chooseInvoiceTitle() 接 口 和 wx.chooseAddress(Object object) 接 口 类 似 , 它 用 来 获 
取 用 户 的 发 票 消息 ,包含 抬头 类 型 .抬头 名 称 ,抬头 税 号 、 单 位 地 址 、 手 机 号 码 、 银 行 名 称 和 银 


行 账号 等 属性 。 
9.8.3 SOTER 指纹 认证 


Tencent SOTER 是 腾讯 于 2015 年 开始 制定 的 生物 认证 平台 与 标准 ,通过 与 厂商 合作 ， 
目前 已 经 在 一 百 余 款 、 数 亿 部 Android 设备 上 得 到 支持 ,并 且 这 个 数字 还 在 快速 增长 。 
Tencent SOTER 设计 支持 指纹 认证 ,人 脸 认 证 和 声 纹 认证 ,目前 小 程序 只 支持 指纹 认证 。 
本 节 的 SOTER 认证 特 指 指纹 认证 。 

目前 ,Tencent SOTER 已 经 在 微 信和 指纹 支付 、 微 信 公 众 号 和 小 程序 指纹 授权 接口 等 场 
景 使 用 。 接 入 Tencent SOTER ,小 程序 可 以 在 不 获取 用 户 指 纹 图 案 的 前 提 下 ,在 Android 
设备 上 实现 可 信 的 指纹 认证 ,获得 与 微 信 指 纹 支付 一 致 的 安全 快捷 认证 体验 。 

小 程序 提供 wx.checkIsSupportSoterAuthentication()、wx.checkIsSoterEnrolledInDevice() 
和 wx.startSoterAuthentication()3 个 接口 来 实现 认证 。wx.checkIsSupportSoterAuthentication() 
实现 检测 手机 是 否 支持 指纹 认证 的 功能 ; wx.checkIsSoterEnrolledInDevice() 实 现 检测 手 
机 安全 设置 系统 是 否 已 经 录入 过 指纹 信息 ; wx.startSoterAuthentication() 判 断 当 前 录入 的 
指纹 是 否 与 手机 安全 指纹 一 致 。 

wx.checkIsSupportSoterAuthentication( ) 接 口 的 success 函数 的 回调 结果 保存 在 res 
.supportMode 中 。res.supportMode 的 取 值 如 表 9.12 所 示 。 
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表 9.12 res.supportMode 取 值 表 


属 性 说 明 
fingerPrint 指纹 识别 
facial 人 脸 识 别 ( 暂 未 支持 ) 
speech 声 纹 识别 ( 暂 未 支持 ) 


wx.checkIsSoterEnrolledInDevice( ) 检 测 手机 是 否 保存 了 指纹 、 人 脸 和 声 纹 信息 ,该 接 
口 的 属性 如 表 9.13 所 示 。 


表 9.13 wx.checkIsSoterEnrolledInDevice() 属 性 表 


属 性 类 型 必 填 说 明 
checkAuthMode String 是 认证 方式 
Success function 否 接口 调用 成 功 的 回调 函数 
fail function 否 接口 调用 失败 的 回调 函数 
complete function 否 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


因为 前 面 只 支持 指纹 认证 ,所 以 表 9.13 中 的 checkAuthMode 的 取 值 就 只 能 是 fingerPrint。 
wx.startSoterAuthentication() 接 口 是 真 正 执行 SOTER 认证 的 接口 ,也 就 是 执行 指纹 
认证 ,该 接口 属性 如 表 9.14 所 示 。 


表 9.14 wx. startSoterAuthentication( ) 属 性 表 


属 性 类 型 必 填 说 明 
requestAuthModes | Array.< string> 是 | 请 求 使 用 可 接受 的 生物 认证 方式 
挑战 因子 。 挑 战 因子 是 调用 者 为 此 次 生物 鉴 权 准 备 的 
用 于 签名 的 字符 串 关键 识别 信息 ,将 作为 resulJSON 
challenge string 是 | 的 一 部 分 , 供 调 用 者 识别 本 次 请 求 。 例 如 ,如 果 场 景 为 
请 求 用 户 对 某 订 单 进行 授权 确认 , 则 可 以 将 订单 号 填 
和 此 参数 
验证 描述 , 即 识别 过 程 中 显示 在 界面 上 的 对 话 框 提示 
authContent string 否 内 容 
SUCCess function 否 | 接口 调用 成 功 的 回调 函数 
fail function 否 | 接口 调用 失败 的 回调 函数 
complete function 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 


3 国 


[ 圆 9-14 本 例 使 用 SOTER 认证 的 3 个 接口 验证 小 程序 的 指纹 识别 

功能 ,程序 运行 效果 如 图 9.28 和 图 9.29 所 示 。 沁 
pages/SoterAuthentication/SoterAuthentication.wxml 的 代码 如 下 : 

视频 讲解 


pT 


< view class = "container"> 
< view class = "page — body"> 
<view class = "btn— area"> 
< button type = "primary"” bindtap = "startAuth"> 指 纹 认证 </button> 
</view> 
</view> 


</view> 
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指纹 认证 示例 指纹 认证 示人 
© 请 验证 指纹 © 指纹 验证 成 功 
取消 取消 
图 9.28 弹出 指纹 认证 消息 图 9.29 认证 成 功 


pages/SoterAuthentication/SoterAuthentication.js 的 代码 如 下 : 


const AUTH _ MODE = 'fingerPrint' 
Page({ 
startAuth() { 
wx. checkIsSupportSoterAuthentication({ 
success: (res) =>{ 
console. log(res) 
checkIsEnrolled() 
} 
fail: (err) =>{ 
console. error(err) 
wx. showModal ( { 
title: ' 错 误 ' 
content: ' 您 的 设备 不 支持 指纹 识别 ' 
showCancel: false 
}) 
} 
}) 
const checkIsEnrolled = () =>{ 
wx. checkIsSoterEnrolledInDevice( { 
checkAuthMode: AUTH MODE, 
success: (res) =>1{ 


console. log(res) 
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证 (parseInt(res. isEnrolled) <= 0) { 
wx. ShowModal({ 
title: ' 错 误 ' 
content: ' 您 暂 未 录入 指纹 信息 ,请 录 和 人 后 重 试 ' 
showCancel: false 
}) 
return 
} 
startSoterAuthentication( ); 
}, 
fail: (err) =>{ 
console. error(err) 
} 
}) 
} 
const startSoterAuthentication = () =>{ 
wx. startSoterAuthentication({ 
requestAuthModes: [AUTH MODE], 
challenge: 'test' 
authContent:' 小 程序 示例 ' 
success: (res) =>{ 
console. log(res) 
wx. showToast ( { 
title: ' 认 证 成 功 '， 
duration: 10000 
}) 
}, 
fail: (err) =>{ 
console. error(err) 
wx. showModal ({ 
title: ' 失 败 ' 
content: ' 认 证 失败 ' 
showCancel: false 


【代码 讲解 】 本 例 一 次 调用 wx. checkIsSupportSoterAuthentication ( )、wx. 
checkIsSoterEnrolledInDevice() 和 wx.startSoterAuthentication()3 个 接口 ,是 规范 的 指纹 
认证 流程 。 


9.9 实 训 项 目 一 一 购物 车 与 结算 功能 


本 实 训 项 目 介绍 一 个 简单 的 购物 车 与 结算 功能 案例 。 项目 共 由 3 个 页 面 构 加 
成 : 商品 列表 和 购物 车 页 面 goods. wxml\ 填 写 收 货 地 址 页 面 chooseAddress ”视频 讲解 
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.wxml 及 支付 页 面 pay.wxml。goods.wxml 页 面 通过 “结算 ”按钮 调用 chooseAddress 函数 跳 
转 到 chooseAddress.wxml。chooseAddress.wxml 页 面 通过 “提交 ”按钮 调用 pay 函数 跳 转 
到 pay.wxml 页 面 。pay.wxml 页 面 通过 “支付 ”按钮 调用 例 9-5 的 微 信 支付 功能 完成 支付 流 
程 。 项 目 执 行 效果 如 图 9.30 一 图 9.32 所 示 。 


海南 13.5 度 胡 玉 米 新 鲜 现 摘 


EB 
pS BE 


[| ramonniae 


要 阳 黄 槐 新 评 当 季 水 于 桃 


志 阳 商 愧 打 果 当 手 水 让 。 Y59.8(-) 1 @ 
¥*39.80)1@ 


1@ 


IE 


图 9.30 商品 列表 和 购物 车 


时 西 可 进口 牛 油 果 宝 宝 辅食 


正宗 士 鸡 其 养 农家 老母 鸡 ¥58 人 


收 货 人 姓名 张 三 


邮编 510000 

地 区 广东 省 广州 市 海珠 区 
收 货 地 址 。 新 港 中 路 397 号 
国家 码 510000 

手机 号 码 。 020-81167888 


图 9.31 填写 收 货 地 址 


pages/goods/goods.wxml 的 代码 如 下 : 


<view class = "costumerinfo"> 


<view class = "info"> 
<view class 


<view class= 
</view> 
<view class = "info3"> 
</view> 
</view> 


"infol">{ {name}} {{tel}}</view> 
info2">{ {address}}</view> 


<view class = "wxpay"> 支付 方式 : 微 信 支 付 </view> 


<view class= "cartlist"> 


<view class = "table"> 


<view class = "item" wx:for = "{{cart. list}}" wx:for — index 


key= "id"> 
<view class= "tr"> 


张 三 020-81167888 
支付 方式 : 微 信 支 付 


京 阳 黄 桃 新 鲜 
墨西哥 进口 牛 油 果 宝宝 辅食 x1 
正宗 土 鸡 散 养 农家 老母 鸡 x1 ¥58 


x1 ¥59.8| 


¥39.8| 


订单 半 157.6 优惠 ¥10 


付 ¥147.6 


优惠 ¥10 支付 


图 9.32 支付 


wx:for -item = "num" wx: 


<view class = "td" class = "itemname">{{foodlist[id]. name}}</view> 
<view class = "td" class = "itemnum"> x {{cart. list[id]}}</view> 


<view class= "td" class = "itemprice"> ¥ {{foodlist[id].price* cart. list[id]}}</view> 


</view> 

</view> 
<view></view> 

<view class = "trbom"> 


< view class = "Discount1"> 满 减 活动 </view> 
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< view class = "Discount2"> - 至 10 </view> 
</view> 
</view> 
<view class = "total0"> 
<view class = "totall"> 订 单 ¥ {{cart. total}}</view> 
<view class = "total2"> 优 惠 三 10 </view> 
< view class = "total3"> 待 支付 ¥ {{cart. total - 10}}</view> 
</view> 
</view> 
<view class = "pay" bindtap = 'orderpay'> 
< view class = "pay1"> 待 支付 ¥ {{cart. total - 10}} </view> 
< view class = "pay2">| 优惠 ¥ 10 </view> 
< button class = "paybtn"> 支付 </button > 
</view> 


【代码 讲解 】 good.wxml 主要 使 用 页 面 的 样式 与 布局 知识 点 ,整个 wxml 文件 分 为 商 
品 显示 部 分 .隐藏 的 购物 车 部 分 和 底部 结算 栏 三 部 分 。 本 例 通过 hidden 属性 的 false 和 
true 的 取 值 变化 来 控制 购物 车 的 隐藏 和 显示 。 商 品 显示 部 分 使 用 了 wx:for 循环 泻 染 来 显 
示 多 个 商品 的 图片“ 价格 "和 “标题 "字段 。 

pages/goods/goods.js 的 代码 如 下 : 


var app = getApp(); 
Page( { 
data: { 
filterId: 1, 
showhiddencart :false, 
foodlist: 
[ 


id; 1; 

name: "海南 13.5 度 甜 玉米 新 鲜 现 摘 '， 
pic: '/imgs/good/1. jpg', 
price:29.8 


id: 2, 

name: ' 束 阳 黄 桃 新 鲜 当 季 水 蜜 桃 … 
pic: '/imgs/good/2. jpg', 
price:59.8 


id: 3, 
name: “墨西哥 进口 牛 油 果 宝宝 辅食 … 
pic: '/imgs/good/3. jpg', 
Price:39.8 

}, 


id: 4, 


name:' 正 宗 土 鸡 散 养 农家 老母 鸡 '， 
pic: '/imgs/good/4. jpg', 
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price:58 


id: 57 

name: "麻辣 小 龙虾 1.8 斤 装 十 三 香 '， 
pic: '/imgs/good/5. jpg', 

price:58 


id: 6, 
name: ' 洪 泽 湖 大 闸 蟹 鲜 活 现货 
pic: '/imgs/good/6. jpg', 
price:148 
} 
], 
cart: { 
count: 0, 
total: 0, 
list: {} 
}, 


}, 
onLoad: function() { 
console. log( "onLoad" ); 
this. setData( { 
id: 0 
}); 


}, 
// 计 算 
tapAddCart: function(e) { 
console. log(e); 
console. log(e. target. id); 
this. addCart(e. target. id); 
}, 
tapReduceCart: function(e) { 
console. log(e); 
this. reduceCart(e. target. id); 
}, 
addCart: function(id) { 
console. log(this. data. cart. list); 
var num = this. data. cart. list[id] || 0; 
console. log("num" + num); 
this. data. cart. list[id] = num + 1; 
this. countCart( ); 
}, 
reduceCart: function(id) { 
var num = this. data. cart. list[id] || 0; 
if (num<= 1) { 
delete this. data. cart. list[id]; 
} else{ 
this. data. cart. list[id] = num 一 1; 
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this. countCart() 
}, 
countCart: function() { 
var count = 0, 
total = 0; 
for (var id in this. data. cart. list) { 
var goods = this. data. foodlist[id]; 
count += this. data.cart. list[id]; 
total += goods.price * this.data. cart. list[id]; 
} 
this. data. cart. count = count; 
this. data. cart. total = total; 
this. setData({ 
cart: this. data. cart 
}); 
}, 
// 显 示 隐 藏 购物 车 
showhiddencart: function() { 
this. setData( { 
showhiddencart: !this. data. showhiddencart 
D); 
}, 
closehiddencart: function() { 
this. setData( { 
showhiddencart: false 
}); 
}, 
chooseAddress: function() { 
try{ 
Wx. setStorageSync( 'cart', this. data. cart) 
} catch (e) { console. log("good. js 的 wx. setStorageSync 出 错 ") } 
wx. navigateTo( { 
url: '../chooseAddress/chooseAddress' 
}) 
}, 
}); 


【代码 讲解 】 goods.js 通过 wx.setStorageSync('cart' ,this.data.cart) 将 购物 车 的 内 容 存 
储 到 数据 缓存 区 ,以 供 pay.wxml 文件 使 用 。 本 例 核心 功能 是 通过 addCart 和 reduceCart 两 
个 函数 实现 商品 在 购物 车 中 的 添加 和 删除 功能 。 

pages/goods/goods.wxss 的 代码 如 下 : 


page{ffont - family: "微软 正 黑体 ";} 
/* 主体 部 分 */ 
.body{position:relative;top:10rpx; padding: 8rpx 0;margin - bottom:100rpx;} 
.body . item{width: 50 %;float:left;text — align: center;} 
.body . item .goodsbox{background: # fff;width:90 %;margin:0 auto; 
height :400rpx; position:relative;margin— top:30rpx;box— shadow:0 0 5px #eee;} 
.body . item image{width: 100 %;height:250rpx;} 
.body . item .price{color: #3c3c3c;font — size: 
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24rpx; height :100rpx;width:100rpx; line — height:65rpx;background: # fff; 
border - radius:50 %;text — align:center;position:absolute; top:200rpx; left:50 %; 
margin— left: — 50rpx;} 

.body . item .goodsname{width:100 %;color: #3c3c3c;font - size: 

30rpx; position:absolute; top:270rpx; left:0;z— index: 99;text — align: center} 
.body . item .add{width:150rpx; background: # £39303;color: #fff;font — size:24 rpx; 

position:absolute; top:320rpx; left:30 %;z— index: 99;text — align: center; 

border - radius:5px;font - size: 24rpx; height :50rpx; line — height: 50rpx;} 

.gekai{clear:both;} 

/* 下 方 购物 车 */ 

.hiddencart, .cart— detail .mask{position: fixed;left: 0;top: 0;width: 100 %;height: 100 %; 

z— index: 999999} 

.hiddencart .cartheader{background: rgba(0,0,0,0.7);} 

.hiddencart .list{position: absolute; left: 0;bottom: 100rpx;width: 100 %; 
background: #f7f7f7;padding:0 0 70rpx;z ~ index:9999999} 

.hiddencart .list .item{display: - webkit - flex;color: #333;font— size: 
36rpx; line ~ height: 50rpx;padding: 20rpx 40rpx;border - bottom:1px solid #5d5d5d5} 

.hiddencart .list . item . itemname{ - webkit ~ flex: 1;font — size:30rpx;color: #606060} 

.hiddencart .list . item . itemtotal {width: 120rpx;font - size:36rpx;color: #373737; 
font - weight: bold} 

.hiddencart .list . item . itemreduce, 

,hiddencart .list . item . itemadd{font - size: 50rpx;background: #4a4a4a;width: 50rpx; 
height: 50rpx;text - align: center;border - radius: 50 %;color:#fff;line— height: 
40rpx; border: 1px solid # 4a4a4a} 

.hiddencart .list . item , itemreduce{background: #ffffff;color:#4a4ad4a;border:1px 
solid # 4a4a4a} 

.hiddencart .list . item .itemnum{width: 50rpx;text ~ align: center;margin: 0 5rpx; 
color: # 4a4a4a} 

.bottomcart{display: — webkit ~ flex;position: fixed;left: 0;bottom: 0;width: 100 %; 
height: 100rpx;background: #3c3d41;z— index: 999999} 

.bottomcart .data{ — webkit — flex: 1;/* border - top: lrpx solid #¢e7e7e7; * /} 

.bottomcart . data . icon{position: absolute; left: 40rpx;top: — 40rpx;width: 100rpx; 
height: 100rpx;background: #5393939;border - radius: 50 %;border:5px solid #3c3d41; 
box - shadow:0 0 5px # 000} 

.bottomcart . data . icon image{position: absolute; left: 15rpx;top: 15rpx;width: 70rpx; 
height: 70rpx;} 

.bottomcart . data . icon .count{position: absolute; left: 70rpx;top: — 20rpx; 
font - size: 30rpx;width: 50rpx;height: 50rpx;line— height: 50rpx;color: #fff; 
background: 井 f45044;border - radius: 50 %;text - align: center} 

.bottomcart . data .total{color: #f£45044;font— size: 36rpx;line— height: 100rpx; 
padding - left: 160rpx;} 

.bottomcart button{width: 200rpx; height: 100 %;font — size: 30rpx;background: # £38815; 
color: #fff;line— height:100rpx; border - radius:0} 

. bottomcart button[ disabled][type = "default"], wx— button[disabled] :not([type]) 
{color: # fff;background - color: # 333333;} 

.goodstittle{background: # eS5e5e5;padding:0 20rpx; height :100rpx; line — height:100rpx;} 

.cartheaderleft{width:200rpx; height:50rpx; font — size: 30rpx;float:left;color: # 4a4a4a; 
margin ~ top:25rpx; line — height:50rpx; border — left:3px solid # ffd600; 
text — indent :15rpx;} 

.Cartheaderright{font - size: 30rpx;float:right;color: # 4a4a4a; text - align: right} 

. cartitem{padding:0 20rpx; height:80rpx; line — height :80rpx; border - bottom:1px solid #d5d5d5} 
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.cartitem0{width:100rpx; height:50rpx; font - size:24rpx; float: left; color: # f38dle; margin — 
top:15rpx; line — height :50rpx;border:1px solid #f38dle;text - align: center; 

border - radius:3px;margin — right:5px;} 
.cartiteml {float:left;font - size:24rpx;color: # 4a4a4a; text - align: right} 
.delimg{width:30rpx; height:40rpx; position:relative; top:8rpx;margin - right :3px;} 


pages/chooseAddress/chooseAddress.wxml 的 代码 如 下 : 


<view class = "container"> 
<form> 
<view class = "page — section"> 
<view class = "weui— cells weui— cells after ~ title"> 
<view class = "weui - cell weui - cell_input"> 
< view class = "weui - cell_hd"> 
< view class = "weui - label"> 收 货 人 姓名 </view> 
</view> 
< view class = "weui - cell_bd"> 
{{ addressInfo. userName }} 
</view> 
</view> 
< view class = "weui - cell weui- cell input"> 
< view class = "weui— cell hd"> 
<view class = "weui - label"> 邮 编 </view> 
</view> 
< view class = "weui— cell bd"> 
{{ addressInfo. postalCode }} 
</view> 
</view> 
< view class = "weui— cell weui- cell_input region"> 
< view class = "weui - cell hd"> 
< view class = "weui - label"> 地 区 </view> 
</view> 
<view class = "weui— cell bd"> 
{{ addressInfo. provinceName }} 
{{ addressInfo. cityName }} 
{{ addressInfo. countyName }} 
</view> 
</view> 
<view class = "weui— cell weui— cell input detail"> 
<view class = "weui— cell hd"> 
<view class = "weui - label"> 收 货 地 址 </view> 
</view> 
<view class = "weui - cell bd"> 
{{ addressInfo. detailInfo }} 
</view> 
</view> 
<view class = "weui - cell weui- cell input"> 
< view class = "weui - cell hd"> 
<view class = "weui - label"> 国 家 码 </view> 
</view> 


<view class = "weui— cell bd"> 
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{{ addressInfo. nationalCode }} 
</view> 
</view> 


< view class = "weui— cell weui- cell input"> 


< view class = "weui - cell hd"> 
< view class = "weui - label"> 手 机 号 码 </view> 
</view> 


< view class = "weui - cell bd"> 
{{ addressInfo. telNumber }} 
</view> 
</view> 


</view> 


</view> 
</form> 


< view class = "btn- area" hidden="{{chooseAddress}}"> 
< button type = "primary”bindtap = "chooseAddress"> 获 取 收 货 地 址 </button > 


</view> 


<view class = "btn - area" hidden="{{!chooseAddress}}"> 
< button type = "primary" bindtap = "pay"> 提 交 </button > 


</view> 
</view> 


【代码 讲解 】 


chooseAddress.wxml 文件 和 例 9-13 类 似 , 实 现 获取 微 信 收 货 地 址 。 因 
为 微 信 收 货 地 址 基于 微 信 的 三 方 共享 性 ,强烈 推荐 在 电 商 系统 中 调用 wx.chooseAddress() 


接口 来 填写 用 户 信息 。 
pages/chooseAddress/chooseAddress.js 的 代码 如 下 : 


Page({ 
data: { 


addressInfo: null, 


chooseAddress:false 


}, 


chooseAddress:function(e){ 


var that = 


this; 


wx. chooseAddress( { 


success: function(res){ 
that. setData( { 
addressInfo: res, 
chooseAddress: true 


3 
try{ 
wx 
wx 
wx 


WX 


WX. 


. SetStorageSync( 'name', that. data.addressInfo. userName) 

. setStorageSync( 'tel', that. data.addressInfo. telNumber) 

. setStorageSync( 'addressl1', that. data.addressInfo. provinceName) 
. SetStorageSync( 'address2', that. data. addressInfo. cityName) 


setStorageSync( 'address3', that. data.addressInfo. detailInfo) 


} catch (e) { console. 1og("wx. setStorageSync 出 错 ") } 


}, 


fail: function(err) { 


console. log(err) 
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} 
}) 
}, 
pay:function(e){ 
wx. navigateTo( { 
url: '../pay/pay' 
}) 


}) 


【代码 讲解 】 chooseAddress.js 5 次 调用 wx.setStorageSync() 接 口 将 收 货 地 址 的 姓 
名 电话、 省 ,市 和 详细 地 址 信息 写 和 人 数据 缓存 区 ,以 供 pay.wxml 文件 使 用 。 
pages/chooseAddress/chooseAddress.wxss 的 代码 如 下 : 


@ import "../1ib/weui. wxss"; 
form { 
margin — top: 30rpx; 
} 
.weui— cell bd { 
display: flex; 
justify— content: flex— start; 
padding: 20rpx 0; 
min - height: 60rpx; 
} 
.btn ~ area { 
margin ~ top: 30rpx; 
} 
.Page — section{ 
width: 100 %; 
margin — left: Orpx; 
} 


pages/pay/pay.wxml 的 代码 如 下 : 


<view class = "costumerinfo"> 
<view class = "info"> 
<view class = "infol">{ {name}} {{tel}}</view> 
<view class = "info2">{ {address1}}{{address2}}{{address3}}</view> 
</view> 
<view class = "info3"> 
</view> 
</view> 
<view class = "wxpay"> 支付 方式 : 微 信和 支付 </view> 
<view class= "cartlist"> 
<view class= "table"> 
<view class= "item" wx:for = "{{cart. list}}" wx:for ~ index = "id" 
wx:for — item= "num" wx:key= "id"> 
<view class= "tr"> 
<view class = "td" class = "itemname">{{foodlist[ id]. name}}</view> 
<view class = "td" class = "itemnum"> x {{cart. list[id]}}</view> 
<view class= "td" class = "itemprice">¥ {{foodlist[id].price* cart. list[id]}}</view> 
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</view> 
</view> 
<view></view> 
<view class = "trbom"> 
<view class = "Discount1"> 满 减 活 动 </view> 
<view class = "Discount2">— ¥10</view> 
</view> 
</view> 
<view class = "total0"> 
<view class = "totall"> 订 单 ¥ {{cart. total}}</view> 
<view class = "total2"> 优 惠 三 10 </view> 
< view class = "total3"> 待 支付 ¥ {{cart. total - 10}}</view> 
</view> 
</view> 
< view class = "pay" bindtap = 'orderpay'> 
<view class = "pay1"> 待 支付 ¥ {{cart. total - 10}} </view> 
<view class = "pay2">| 优惠 ¥ 10 </view> 
< button class = "paybtn"> 支付 </button > 
</view> 


pages/pay/pay.js 的 代码 如 下 : 


Page({ 
data:{ 

name: ' 张 三 '， 
tel: "18888888888", 
addressl: ' 广 东 省 '， 
address2: "中山 市 '， 
address3: ' 中 山北 站 1 号 '， 
imageUrl: "/imgs/index/bottom. jpg", 
foodlist: 


id: 1, 

name: ' 海 南 13.5 度 甜 玉米 新 鲜 现 摘 '， 
pic: '/imgs/good/1. jpg', 

price: 29.8 


id: 2, 
name:' 刺 阳 黄 桃 新 鲜 当 季 水 蜜 桃 '， 
pic: '/imgs/good/2. jpg', 
price: 59.8 
}, 
{ 
id: 3, 
name:' 墨 西 哥 进口 牛 油 果 宝宝 辅食 '， 
pic: '/imgs/good/3. jpg', 
price: 39.8 
}, 
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id: 4, 
name: ' 正 宗 土 鸡 散 养 农家 老母 鸡 '， 
pic: '/imgs/good/4. jpg', 

price: 58 


id: 35; 

name:' 麻 辣 小 龙虾 1.8 斤 装 十 三 香 '， 
pic: '/imgs/good/5. jpg', 

price: 58 


id: 6, 
name:“ 洪 泽 湖 大 闸 蟹 鲜 活 现货 … 
pic: '/imgs/good/6. jpg', 
price: 148 
} 
]， 
cart: { 
count: 0, 
total: 0, 
list: {} 
}, 
}, 
onLoad: function(options){ 
this. setData( { 
name: wx. getStorageSync( 'name'), 
tel: wx. getStorageSync( 'tel'), 
addressl1: wx. getStorageSync( 'address1'), 
address2: wx.getStorageSync( 'address2'), 
address3: wx.getStorageSync( 'address3'), 
cart: wx. getStorageSync( 'cart') 
}) 
}, 
orderpay: function(e) { 
var that = this; 
wx. login( { 
success: function(res) { 
wx. request({ 
url: 'https://skill. qiujikeji. com/mini/getOpenid’, 
method: 'POST', 
data: { 'js_code': res.code }, 
success: function(res) { 
console. log( res. data) 
that. xiadan( res. data); 
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xiadan: function(openid) { 
var that = this; 
wx. request ({ 
url: 'https://skill. qiujikeji. com/mini/pay/teacher', 
method: 'POST', 
data: { 'openid': openid }, 
success: function(res) { 
Var res = res.data 
Wx. requestPayment({ 
timeStamp: res.timeStamp, 
nonceStr: res.nonceStr, 
package: res. package, 
signType: 'MD5', 
paySign: res. paySign, 


【代码 讲解 】 pay.js 6 次 调用 wx.getStorageSync() 接 口 将 chooseAddress.js 和 goods. 


js 写 人 数据 缓存 的 信息 全 部 读 出 ,并 通过 数据 绑 定 的 方式 在 pay.wxml 中 显示 。 


pages/pay/pay.wxss 的 代码 如 下 : 


page { 
font - fanily: "微软 正 黑体 " 
background: #f5f5f5; 
padding - bottom: 150rpx; 

} 

.Costumerinfo{font - size:35rpx;color: #606060; height:100rpx;background - siz e:auto 1px} 

. info{width:80 %;margin - left:20rpx;padding - left:50rpx; height:150rpx; 
float:left;background - size:auto 50rpx} 

.infol{font - size:35rpx;color: # 4a4a4a;margin - top:18rpx} 

. info2{font - size:34rpx;color: #a4a4a4;margin - top:5rpx} 

. info3{width:10 %;height :150rpx; float:right; background - size:auto 30rpx} 

.Wwxpay{background: # fff; padding:30rpx 20rpx;margin - top:30rpx; font — size:35rpx; 
color: #4a4a4a;} 

.Cartlist{background: #fff;margin ~ top:30rpx;padding:30rpx 0 0} 

.Cartlist .table{width: 100 %;font — size:40rpx;color: #606060; text - align: center; 
border - bottom:1px solid # e8e8e8} 

.tr{display: flex;padding:15rpx 20rpx;} 

.th, .td{border:0;width:100 $%;} 

.itemname{width:70 %;text — align: left} 

. itemnum{width:15 $%;} 

. itemprice{width:15 %;text - align: right} 

.trbom{display: flex;padding:15rpx 20rpx;} 

.tdbomtit{text ~ align: left;width:85 %;font— size:28rpx;} 

.tdbomprice{ text ~ align: right;width:15 %;color: #f£38815} 

. Summary0{font - size:35rpx;color: # 4a4a4a; text - align: right;padding:20rpx;} 

. Summary1 {display: inline;font - size:35rpx;color: 并 606060;margin - right:10px} 

. Summary2{display: inline;font - size:35rpx;color: #606060;margin— right:10px} 


374 


第 9 章 ”交互 接口 和 开放 接口 


.Summary3{display: inline; font — size:35rpx;color: # £38815;} 

-pay{ 

position:fixed; left:0;bottom:0;width:100 %;height:100rpx;background: # 3c3d41; 
z— index:999999; 

} 

.payl{font — size:40rpx;color: # fff;display: inline- block;float:left;line— height:100rpx; 
margin— left:10px} 

.pay2{font — size:34rpx;color: # eee;display: inline- block;float:left;line— height:100rpx; 
margin — left:5px} 

.paybtn{ 

width:200rpx; 

height :100 %; 

font 一 size:40rpx; 

background: # £38815; 

color: # fff; 

line ~ height :100rpx; 

border - radius:0; 

float:right; 

display: inline— block; 

} 

.Discountl{font - size:40rpx;color:rgb(30, 226, 128);display: inline - block;float:left; 
line— height:100rpx;margin — left:10px} 

.Discount2{font - size:34rpx;color:rgb(46, 202, 59);display: inline - block;float:left; 
line— height:100rpx;margin - left:5px} 
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第 6 一 9 章 介 绍 了 一 些 需要 后 端 程序 配合 的 高 级 接口 ,需要 开发 者 部 署 在 自己 的 服务 
器 上 ,如 第 6 章 的 数据 库 操 作 需 要 在 服务 器 上 搭建 MySQL 环境 为 小 程序 前 端 开 发 提供 
后 端 JSON 接口 数据 。 为 了 减少 小 程序 对 后 端 服务 器 的 依赖 ,腾讯 公司 于 2018 年 9 月 上 
线 了 小 程序 云 开发 服务 , 它 加 快 了 小 程序 开发 的 效率 ,降低 了 成 本 ,为 小 程序 前 后 端 开 发 
提供 了 一 种 全 新 的 解决 方案 。 
本 章 主要 目标 
。 了解 小 程序 云 开发 产生 的 意义 ; 
。， 了 解 云 函数 、 云 存储 和 云 数据 库 的 概念 和 应 用 场景 ; 
。， 熟 练 掌握 云 开 发 控制 台 对 云 函 数 、 云 存储 和 云 数据 库 的 操作 ,掌握 云 数据 库 操作 权 
限 问 题 ; 
。， 熟 练 掌握 云 函 数 、 云 存储 和 云 数 据 库 的 小 程序 端 API 和 服务 端 API, 掌 握 云 数据 库 
增删 改 查 操作 。 


10.1 云 开发 


微 信 小 程序 云 开 发 是 2018 年 9 月 腾讯 上 线 的 集 云 函数 、 云 数据 库 、 云 存储 和 云 调用 等 
功能 于 一 身 的 开放 服务 。 云 开发 为 开发 者 提供 完整 的 原生 云端 支持 和 微 信 服务 支持 ,弱化 
后 端 和 运 维 概念 ,无 须 搭建 服务 器 ,使 用 平台 提供 的 API 进行 核心 业务 开发 , 即 可 实现 快速 
上 线 和 迭代 ,同时 这 一 能 力 同 开发 者 使 用 的 云 服务 相互 兼容 ,并 不 互 斥 。 

云 开发 提供 了 几 大 基础 能 力 支持 ,如 表 10.1 所 示 。 
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表 10.1 云 开 发 基础 能 力 


能 力 作 用 说 明 
a > 在 云端 运行 的 代码 , 微 信 私有 协议 天 然 鉴 权 , 开 发 者 只 需 编 写 自 
云 函数 无 须 自 建 服务 器 身 业务 迎 辑 代码 
云 数据 库 | 无 须 自 建 数 据 库 一 个 既 可 在 小 程序 前 端 操作 ,也 能 在 云 函数 中 读 写 的 JSON 数据 库 
rt 云端 文件 ,在 云 开发 控制 台 记 
云 存储 无 须 自 建 存储 和 CDN 人 上 传 /下 载 云端 文件 ,在 云 开发 控制 台 可 视 化 
目 注 


基于 云 函 数 免 鉴 权 使 用 小 程序 开放 接口 的 能 力 , 包 括 服 务 端 调 


| 用 、 获 取 开 放 数据 等 能 力 


可 以 简单 地 理解 为 : 云 开发 是 腾讯 为 小 程序 开发 者 在 腾讯 云 上 开辟 了 一 片 空间 ,本 来 
需要 用 Java 或 者 PHP 这 些 程序 语言 编写 的 后 端 函 数 ,现在 可 以 和 开发 小 程序 前 端 一 样 使 
用 JavaScript 开发 并 且 部 署 在 云端 ; 本 来 需要 在 后 端 服务 器 创建 的 数据 库 , 现 在 可 以 在 云 
端 创建 ; 本 来 需要 保存 在 后 端 服务 器 的 程序 素材 文件 ,现在 可 以 通过 云 存 储 免 费 存放 在 云 
端 ,并 在 其 需要 使 用 时 ,开发 者 只 需 使 用 云 调 用 即 可 实现 和 调用 服务 器 端 资源 一 样 调 用 云端 


10.1.1 开通 云 开发 功能 


使 用 云 开 发 之 前 需要 先 开 通 云 开发 功能 ,开通 云 开发 功能 可 以 按照 以 下 步骤 来 进行 : 

(1) 新 建 一 个 项 目 : 在 创建 新 项 目的 时 候 必须 填写 真实 的 AppID, 使 用 虚拟 的 测试 
AppId 将 不 能 开通 云 开 发 。 

(2) 开通 云 开 发 功能 : 在 开发 者 工具 菜单 栏 ,如 图 10.1 所 示 , 单 击 “ 云 开发 "按钮 即 可 打 
开 图 10.2 所 示 界 面 ,该 界面 显示 了 云 开发 控制 台 拥 有 的 云 函 数 .数据 库 、 文 件 存储 和 数据 分 
析 的 基本 功能 。 


<P 10-1 - 微 信 开发 者 工具 Stable v1.02.1904090 
项 目 文件 编辑 工具 界面 设置 微 信 开 发 者 工具 


iPhone5 ~ 100% v WFi 


图 10.1 单 击 “ 云 开发 ”按钮 


(3) 创建 环境 : 单 击 图 10.2 中 的 “开通 ”按钮 ,将 进入 图 10.3 所 示 的 创建 云 环境 界面 ， 
填写 “环境 名 称 ” 和 “环境 ID? 两 项 内 容 。 默 认 配 额 下 可 以 创建 两 个 环境 ,环境 间 相 互 隔离 ， 
每 个 环境 都 包含 独立 的 数据 库 实 例 、 存 储 空间 . 云 函 数 配置 等 资源 。 每 个 环境 都 有 唯一 的 环 
境 ID 标识 ,初始 创建 的 环境 自动 成 为 默认 环境 。 

(4) 完成 创建 环境 : 单 击 图 10.3 中 的 “确定 ”按钮 ,将 成 功 开通 云 开发 功能 并 进入 云 开 
发 控制 台 ,如 图 10.4 所 示 。 

图 10.3 和 图 10.4 都 显示 了 云 开 发 基础 资源 配额 ,例如 存储 空间 、CDN 流量 、 云 函数 调 
用 次 数 和 云 函 数 同时 连接 数 等 ,这 些 资 源 配 置 都 是 腾讯 云 免费 开放 给 小 程序 开发 者 的 。 除 
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回 文件 存储 吊 


小 程序 . 云 开 友 


快速 开发 小 程序 


区 云 函数 目 数据 库 
在 去 的 代码 ， 概 信 私 有 协议 天 然 监 权 一 个 茎 可 在 小 程序 前 端 操作 ， 也 能 在 云 函 数 中 
开发 者 只 需 编写 自身 业务 过 加 代码 读 写 的 JSON 数据 库 


庙 直 接 上传/ 下载 云 端 文件 ， 在 云 开 
视 化 管理 


图 10.2 单 击 “ 开 通 ” 按 钮 


创建 环境 
环境 名 称 。 “mrchen 
一 个 具体 的 环境 名 称 有 助 于 区 分 和 记忆 。 
环境 ID mrchen201901 
环境 1D 是 在 使 用 云 服 务 时 需要 用 到 的 全 局 唯一 标识 符 ， 一 经 创建 便 不 可 修改 。 
环境 配额 
基础 配额 。 当 王 大 
存储 空间 5G/ 月 云 函 数 同时 连接 数 。 “2( 
CDN 流星 5GB/ 月 数据 库容 县 
云 函 数 调用 次 数 20 万 次 数据 库 同 时 连接 数 。 “2 
查看 详情 > 


图 10.3 创建 云 环境 界面 
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国 区 


目 E53 当前 环境 mrchen 
运营 分 析 数 右 库 存 镶 云 本 到 设 轩 


数据 库容 全 存储 宕 坚 本 月 CDN 流 圣 本 月 云 函 数 调用 次 数 本 月 云 函 数 资源 使 用 量 


0 ..。 0...。 0.... 0 冯 | 0 


图 10.4 初始 的 云 开发 控制 台 


以 上 配额 参数 外 ,小 程序 云 开发 资源 还 包括 以 下 系统 参数 限制 。 

云 函数 ( 单 次 运行 ) 运 行内 存 : 256MB; 

云 函数 数量 : 50 个 ; 

数据 库 流 量 : 单 次 出 包 大 小 为 16MB; 

数据 库 单 集合 索引 限制 : 20 个 。 

以 上 均 是 一 个 环境 的 配额 ,不 是 所 有 环境 的 限制 总 额 。 如 需 申 请 上 调 , 开 发 者 可 以 以 
“申请 调整 小 程序 云 开发 调用 资源 上 限 ” 为 主题 ,发 送 邮 件 至 miniprogram@tencent.com 申 
请 调整 ,并 在 正文 中 注 明 小 程序 账号 AppID、 需 要 调整 的 环境 名 称 、 需 要 调整 的 资源 上 限 
〈 仅 限 资源 配额 中 所 列 内 容 且 非 系统 参数 限制 )、 小 程序 服务 类 目 ( 可 在 小 程序 基本 设置 中 查 
询 ) 资源 调整 原因 以 及 产品 计划 上 线 时 间 。 

当 看 到 如 图 10.4 所 示 界 面 的 时 候 , 说 明 云 开发 功能 开通 成 功 了 。 


10.1.2 云 开发 控制 台 使 用 


云 开发 控制 台 提供 了 资源 环境 管理 \ 云 数据 库 管理 、 云 存储 管理 、 云 函数 管理 和 运营 分 
析 等 功能 。 

1. 资源 环境 管理 

在 实际 开发 中 ,建议 每 一 个 正式 环境 都 搭配 一 个 测试 环境 ,所 有 功能 先 在 测试 环境 测试 
完毕 后 再 进入 正式 环境 。 以 初始 可 创建 的 两 个 环境 


为 例 ,建议 一 个 创建 为 test 测试 环境 , 一 个 创建 为 
release 正式 环境 。 在 如 图 10.5 所 示 的 云 开 发 控制 台 < 
右上 角 的 “当前 环境 ”栏目 可 以 创建 新 的 资源 环境 , 单 站 二 计生 
击 “创建 新 环境 ”按钮 之 后 即 进入 图 10.3 环境 配置 界 a 
面 创建 新 的 环境 。 按 field:value 包 

2. 云 数据 库 管 理 


图 10.5 ”当前 环境 
云 开发 提供 了 一 个 JSON 数据 库 。 顾 名 思 义 , 数 


据 库 中 的 每 条 记录 都 是 一 个 JSON 格式 的 对 象 。 一 个 数据 库 可 以 有 多 个 集合 (相当 于 关系 
型 数据 库 中 的 表 ) ,集合 可 看 作 一 个 JSON 数组 ,数组 中 的 每 个 对 象 就 是 一 条 记录 ,记录 的 格 
式 是 JSON 对 象 。 云 数据 库 中 存在 从 高 到 低 的 三 个 层次 : 集合 .记录 和 字段 ,它们 依次 对 应 
关系 型 数据 库 中 的 表 、 记 录 和 字段 的 概念 ,如 图 10.6 所 示 , 依 次 添加 集合 .记录 和 字段 。 
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“创建 集合 "界面 如 图 10.7 所 示 。“ 添 加 记录 ”界面 如 图 10.8 所 示 。“ 添 加 字段 "界面 如 图 
10.9 所 示 。 


id: b9eb782f-9818-45df-ab22-8f0... 


图 10.6 云 数据 库 的 3 个 层次 


db1 
支持 英文 字母 大 小 写 、 数 字 、- 和 _ 


图 10.7 “创建 集合 "界面 


添加 记录 
集合 名 称 ”db1 
文档 ID [ed] 
™ | se | 
图 10.8 “添加 记录 ”界面 
添加 字段 
字段 
tel = 
boolean 
null a 
ry 了 
object 
date 
geopoint 


图 10.9 “添加 字段 ”界面 
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每 条 记录 都 有 一 个 “_id” 字 段 用 以 唯一 标识 一 条 记录 ,一 个 “_openid” 字 有 段 用 以 标识 记 
录 的 创建 者 , 即 小 程序 的 用 户 。 需 要 注意 的 是 在 云 控制 台 创建 的 记录 没有 “_openid” 字 有 段 ， 
而 通过 小 程序 的 代码 操作 创建 的 记录 会 被 自动 添加 “_openid” 字 段 ,也 就 是 说 不 管 是 通过 云 
开发 控制 台 还 是 通过 前 端 代码 ,它们 创建 的 记录 的 “_openid” 字 段 都 不 需要 用 户 插入 。 开 发 
者 可 以 自 定义 *_id”, 但 不 可 以 自 定义 和 修改 *_openid”。“_openid” 是 在 文档 创建 时 由 系统 
根据 小 程序 用 户 默 认 创 建 的 。 

数据 库 API 分 为 小 程序 端 API 和 服务 端 API 两 部 分 。 小 程序 端 API 拥有 严格 的 调用 
权限 控制 ,开发 者 可 在 小 程序 内 直接 调用 API 进行 非 敏感 数据 的 操作 。 对 于 有 更 高 安全 要 
求 的 数据 ,可 在 云 函 数 内 通过 服务 端 API 进行 操作 。 云 函数 的 环境 是 与 客户 端 完 全 隔离 
的 ,在 云 函数 上 可 以 私密 且 安 全 地 操作 数据 库 。 

3. 云 存储 管理 

云 开 发 免费 为 开发 者 提供 了 一 块 存储 空间 ,提供 了 上 传 文件 到 云端 , 带 权限 管理 的 云端 
下 载 能 力 ,开发 者 可 以 在 小 程序 端 和 云 函数 端 通过 API 使 用 云 存 储 功 能 。 如 图 10.10 所 示 ， 
单 击 “ 新 建文 件 夹 ” 按 钮 可 以 在 云端 创建 文件 夹 , 单 击 * 上 传 文件 ”按钮 可 以 和 百度 云 盘 一 样 
将 本 地 文件 上 传 到 云端 。 


可 
全 上 传 文件 。 叫 新 建文 件 夹 文件 名 称 前 级 Q 
全 部 文件 /img / 
文件 名 称 File ID A | 
口 垃圾 邮件 cloud://mrchen201901.6d72-mrchen201901/img/ 垃 108.44 刚刚 
2jpg 圾 邮件 2jpg KB 


图 10.10 云 存储 管理 


图 10.10 中 的 File ID:“cloud://mrchen201901.6d72-mrchen201901Vimg/ 垃 圾 邮件 2. 
jpg” 即 为 云端 文件 的 引用 地 址 。 

4. 云 国 数 管理 

云 函 数 是 一 段 运行 在 云端 的 代码 ,无须 管 理 服务 器 ,在 开发 工具 内 编写 ,一 键 上 传 部 署 
即 可 运行 的 后 端 代码 。 小 程序 内 提供 了 专门 用 于 云 函数 调用 的 API。 开 发 者 可 以 在 云 函 数 
内 使 用 wx-server-sdk 提供 的 getWXContext 函数 获取 每 次 调用 的 上 下 文 (appid、openid 
等 ) ,无 须 维护 复杂 的 鉴 权 机 制 , 即 可 获取 天 然 可 信任 的 用 户 登 录 态 (openid) 。 

单 击 “ 新 建 云 函数 ”, 如 图 10.11 所 示 , 即 可 弹出 “创建 云 函 数 ” 界 面 ,如 图 10.12 所 示 , 填 
写 “ 云 函数 名 称 ” 后 单 击 “ 确 定 ” 按 钮 即 完成 了 云 函数 的 创建 。 

5. 运营 分 析 

运营 分 析 下 面 有 资源 使 用 、 用 户 访问 和 监控 图 表 三 大 功能 ,可 以 对 小 程序 的 统计 数据 做 
简单 的 分 析 。 
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世 新 建 云 函数 云 卫 数 名 称 Q 
云 函数 名 称 运行 环境 最 后 更 新 时 间 操作 
add Nodejs89 2019-06-17 17:30:39 云端 测试 配置 删除 
共 1 项 每 页 显示 59 v 行 NM 4 1/17i» 


图 10.11 云 函数 管理 界面 


创建 云 函 歼 
云 函 数 名 称 。 “add 
和 _， 第 一 个 字符 只 能 以 字母 开头 
不 能 为 连接 符 或 者 下 划 线 ， 名 称 长 度 2-60 

创建 方式 空白 函数 ~ 

使 用 helloworld 示例 创建 空白 函数 
运行 环境 Nodejs8 9 MW 
执行 方法 index main 

云 函 数 将 从 indexjs 中 的 main 方 法 执行 ， 请 酷 保 文件 中 含有 同名 函数 main 
新 建 完 成 后 ， 可 在 函数 列表 配置 云 函 数 

xx 。” 国 E3 


图 10.12 创建 云 函数 


10.1.3 ”第 一 个 云 开发 小 程序 


加 10-1 通过 10.1.2 节 已 经 成 功 开通 了 云 开 发 功能 ,本 例 创建 第 一 个 云 开发 项 目 。 
新 建 小 程序 项 目 如 图 10.13 所 示 ,在 AppID 栏目 填写 真实 AppID, 后 端 服务 选项 选择 “小 程 
序 。 云 开发 " 单 选 按钮 , 单 击 “ 新 建 "按钮 .系统 即 自动 创建 了 一 个 云 开发 项 
目 demo, 项 目 结构 图 如 图 10.14 所 示 。 

直接 运行 系统 自动 生成 的 demo, 会 弹出 如 图 10.15 所 示 窗 口 提示 云 函 
数 调用 失败 ,这 是 因为 在 云端 还 没有 云 函数 。 

右 击 云 函 数 login 对 应 的 login 文件 夹 ,弹出 如 图 10.16 所 示 界 面 ,选择 
“创建 并 部 署 : 云端 安装 依赖 (不 上 传 node_modules) ”菜单 , 云 函数 即 会 上 
传 部 署 至 云端 。 上 传 部 署 成 功 的 话 ,再 看 项 目 结构 的 时 候 会 发 现 login 和 openapi 两 个 函数 
在 图 10.14 中 的 文件 夹 图 标 已 经 变 成 了 图 10.17 的 云 休 形状 。 打 开 云 开发 控制 台 , 如 图 10. 
18 所 示 , 可 以 发 现 云 函数 中 已 经 有 了 login 和 openapi 两 个 云 函数 ,这 说 明 这 两 个 清 数 已 经 
成 功 上 传 并 部 署 至 云端 ,这 时 再 运行 demo 程序 则 能 正常 运行 。 
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Sm 


项 目 名 称 10-1 
目录 。。 FM 书 wh 程序 写 fch1o0.1 目 
ApplD wx800eb4451b223c35 目 
知 无 ApplD 可 注册 Y 固 doudfunctions | mrchen 
» DD login 
开发 模式 ”小 程序 目 » 中 openapi 
4 niprogral 
后 庙 服 务 不 便 用 云 服务 ER 
» 四 images 
人 小 EE 序 云 肛 发 
» DD pages 
» stye 
appjs 
{} appjson 


ws app wxss 
{} sitemap json 

D README md 

{0} projectconfig json 


| 


图 10.13 新建 云 开发 项 目 图 10.14 云 开发 项 目 目录 结构 


图 10.15 云 函数 调用 失败 


+ QQ -et appjs X 
1 /1app.js 
w 固 doudfunctions | mrchen 2 App({ 
~ DD logn > 一 一 
当前 环境 : mrchen » 
ind 
{) pal 二 创建 并 部 署 ， 云 庙 安 装 依 闵 (不 上 传 node_modules) 
? 四 open ”创建 并 部 署 : 所 有 文件 
v DD miniprd | 
、 忠 mag| 者 注 目录 
» DD page 新 建 JS 
站 sye| 。 新 建 JSON 
appj ”新 建 FILE 
{) appj ”重合 名 
ws app1 删除 
{] siten 。 埋 找 
D READI 
{fo} project 。 硬盘 打开 
在 终端 中 打开 
更 多 i 


图 10.16 创建 并 部 署 
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所 新 建 云 函数 

Y 固 coudfunctions1 mrchen 
b ® login 

eT 云 函 数 名 称 运行 环境 

v DD miniprogram 
» DD images login Nodejs89 
» DO pages 
»* 吕 stye 


S appjs 


openapi Nodejsa.9 


图 10.17 部 署 成 功 图 10.18 云 开 发 控制 台中 的 云 函数 


10.2 云 存 储 


在 10.1.2 节 中 已 经 介绍 过 云 存储 在 云 开 发 控制 台 的 操作 ,但 是 云 开发 控制 台 更 多 的 是 
对 项 目 中 的 初始 文件 的 操作 管理 ,例如 项 目的 Logo 图 片 可 以 通过 云 开 发 控制 台 提 前 上 传 
到 云端 。 项 目 在 执行 的 过 程 中 也 会 涉及 文件 的 操作 ,例如 用 户 上 传 图 片 的 操作 ,这 时 就 需要 
用 到 云 开 发 存储 API。 

小 程序 云 开发 提供 了 一 系列 存储 操作 API, 有 uploadFile ( ) 上 传 文件 接口 、 
downloadFile() 下 载 文件 接口 、deleteFile() 删 除 文件 接口 和 getTempFileURL() 换 取 临 时 
链接 接口 。 

wx.cloud.uploadFile() 接 口 参数 如 表 10.2 所 示 。 如 果 采 用 Callback 风格 ( 详 见 10.3.2 节 )， 
调用 回调 函数 success \fail ,complete 中 的 任 一 个 , 则 会 返回 一 个 UploadTask 对 象 (封装 返 
回信 息 的 对 象 ) ,通过 UploadTask 对 象 可 监听 上 传 事件 。 


表 10.2 ”wx.cloud.uploadFile() 接 口 属 性 表 


字 段 数据 类 型 必 填 说 有明 
cloudPath String ¥ 云 存 储 路 径 ,命名 限制 见 文件 名 命名 限制 
filePath String ¥ 要 上 传 文件 资源 的 路 径 
header Object N HTTP 请 求 Header，Header 中 不 能 设置 Referer 
config Object N 配置 


[加 10-2 使 用 wx.cloud.uploadFile() 接 口上 传 图 片 至 回 


云端 ,程序 运行 效果 如 图 10.19 所 示 。 
pages/uploadFile/uploadFile.wxml 的 代码 如 下 : 


<! -- 上 传 图 片 --> 
< View class = "uploader"> 
< view class = "uploader - text" bindtap = "doUpload"> 
<text > 上 传 图 片 </text > 
</view> 


< view class = "uploader - container" wx:if = "{{imgUrl}}"> 
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< image class = "uploader - image" src = " {{imgUrl}}" mode = "aspectFit" bindtap = 
"previewImg"> </image > 
</view> 
</view> 


Tue Jun 18 2919 19:99:53 GMT+9869 (中 国标 准时 间 ) 接口 调整 
入 > 著 职 wx.getUserInfo 接 术 清 


图 10.19 成 功 上 传 图 片 至 云端 并 返回 结果 
pages/uploadFile/uploadFile.js 的 代码 如 下 : 


// 上 传 图 片 
doUpload: function() { 
// 选 择 图 片 
Wx. chooseImage( { 
count: 1, 
sizeType: [ 'compressed'], 
sourceType: ['album'，'camera'],， 
success: function(res) { 
console. log(res) 
Wx. showLoading( { 
title: ' 上 传 中 '， 
}) 
const filePath = res. tempFilePaths[0] 
var timestamp = (new Date()).valueOf(); 
wx. cloud. uploadFile( { 
cloudPath: "img/" + timestamp + ". jpg"， // 上 传 至 云端 的 路 径 
filePath: filePath, // 小 程序 临时 文件 路 径 
Success: res =>{ 
console. 1og('[ 上 传 文件 ] 成 功 : '，res) 
app. globalData.fileID = res.fileID 
app. globalData. cloudPath = cloudPath 
app. globalData. imagePath = filePath 
wx. navigateTo({ 
url: '../storageConsole/ storageConsole' 
}) 
}, 
fail: e =>{ 
console. error('[ 上 传 文件 ] 失败 : '，e) 
wx. ShowToast({ 
icon: 'none', 
title: ' 上 传 失败 '， 
}) 
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}, 
complete: () =>{ 
wx. hideLoading() 
} 
}) 
}, 
fail: e =>{ 
console. error(e) 
} 
}) 
} 


【代码 讲解 】 本 例 先 调用 了 wx.chooseImage() 接 口 选 择 一 幅 图 片 ,然后 调用 wx 
.cloud.uploadFile() 接 口上 传 图 片 至 云端 。cloudPath 字段 是 上 传 文件 在 云端 的 文件 名 字 ， 
为 了 不 重复 ,本 例 采 用 了 当前 时 间 截 来 命名 云端 文件 名 。filePath 字段 是 本 地 文件 的 路 径 ， 
它 的 值 取 wx.chooseImage() 接 口 的 回调 参数 res.tempFilePaths[0]。 

wx.cloud.downloadFile() 接 口 从 云 存储 空间 下 载 文件 的 示例 代码 如 下 : 


wx. cloud. downloadFile({ 


fileID: "vv // 文 件 卫 
success: res =>{ 
// 返 回 临时 文件 路 径 


console. log(res. tempFilePath) 
}, 


fail: console. error 


}) 
wx.cloud.deleteFile() 接 口 删除 云端 文件 的 示例 代码 如 下 : 


wx. cloud. deleteFile({ 
fileList: ['a7xzcb'], 
Success: res => 1{ 
//handle success 
console. log(res. fileList) 
}, 
fail: console. error 


}) 


10.3 云 函 数 


云 函 数 是 部 署 在 云端 的 函数 , 它 和 小 程序 本 地 的 函数 存在 很 大 的 区 别 , 云 函数 应 用 涉及 
云端 云 函 数 定义 和 本 地 引用 云端 云 函数 的 API 接口 两 个 问题 。 


10.3.1 云浮 数 API 和 云 函数 创建 


1. 小 程序 云 函 数 API 接口 
小 程序 云 函 数 API 接口 是 指 小 程序 调用 云端 函数 的 接口 , 即 和 第 6 章 wx.request() 类 
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似 的 接口 。 小 程序 提供 了 wx.cloud.callFunction() 接 口 作为 云 函 数 API 接口 , 它 的 属性 如 


表 10.3 所 示 。 


表 10.3 ”wx.cloud.callFunction( ) 接 口 属性 表 


参 数 数据 类 型 必 填 说 明 
name String 是 云 函数 名 
data Object 否 传递 给 云 函数 的 参数 
config Object 否 局 部 覆 写 wx.cloud.init 中 定义 的 全 局 配置 
Success Function 否 返回 云 函 数 调用 的 返回 结果 
fail Function 否 接口 调用 失败 的 回调 函数 
complete Function 否 ”| 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 
示例 代码 : 
wx. cloud. callFunction({ 
name: 'add', // 云 函数 名 称 
data: { 
a: 1, // 传 给 云 函数 的 参数 
bey 


}, 


success: function(res) { 
// 成 功 返回 时 的 操作 
}, 
fail: function(res) { 
// 失 败 返回 时 的 操作 
} 
}) 


2. 云端 打数 的 创建 


创建 云 函 数 的 方法 是 右 击 项 目 中 的 cloudfunctions 文件 夹 ,如 图 10.20 所 示 ,选择 “新 建 
Node.js 云 函 数 ” 选 项 ,开发 者 工具 会 自动 生成 一 个 文件 夹 ,如 图 10.21 所 示 , 在 文本 框 中 输 


入 的 文件 夹 的 名 字 即 是 云 函 数 名 。 
w 9 doudfunctions | mrchen 
w doudfunctions Lmrerhen 
»@ add 当前 环境 : mrchen > D |ccd 
ee 新 建 Nodejs 云 函 数 : 2 
Ne 同步 去 函数 列表 
cp openapi 本 地 调试 » OD logn 
“DD mnipogam| gg CD openapi 
» 中 images ER v DD miniprogram 
v DD pages » DD images 
查找 
DD firstcloudfl v DD pages 
8 firstclou 。 硬 合 打开 Y DD firstcloudfunction 
《{) firstclou 在 终端 中 打开 9 firstcloudfunction js 
图 10.20 ”创建 云 函数 图 10.21 输入 云 函 数 名 
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输入 文件 名 ( 云 函数 名 ) 之 后 , 按 回 车 键 结束 名 字 的 输入 。 此 步骤 车 不 是 以 回 车 操作 结 


束 , 而 是 以 移动 鼠标 并 单 击 空白 处 来 结束 的 话 , 云 函数 下 的 index.js 文件 将 是 空白 文件 ; 以 
回 车 操作 结束 则 index.js 文件 会 自动 生成 代码 ,如 图 10.22 所 示 。 


工 77 BBAURF 
™ 固 doudfunctions | mr 2 const cloud = require("wx-server-sdk') 

add 3 

bp@bb 4 cloud.init() 
5 

A 6 // 云 阵 数 入 口 阵 数 

index js 7 exports.main - async (event, context) -> { 
{} package json 8 const wxContext = cloud.getWXContext() 
9 
k 
se 19 return { 
， ® openapi 11 event， 
v BB miniprogram 12 openid: wxContext.OPENID, 

PE ns 13 appid: wxContext.APPID, 
14 unionid: wxContext .UNIONID, 

v 巴 pages 二 

v 巴 firstcloudfunction 16 } 
图 10.22 系统 自动 创建 的 云 函 数 
2 pF Ei 0 = 者 让 作 
在 创建 好 云 函 数 之 后 , 即 可 根据 自己 的 需要 在 main 函数 中 编写 自己 的 代码 。 使 用 回 


车 结束 云 函 数 的 创建 还 有 一 个 好 处 是 可 以 不 用 像 图 10.16 那样 上 传 和 部 署 云 函 数 , 系 统 会 
自动 上 传 和 部 署 函 数 至 云端 , 即 云 函数 对 应 的 文件 夹 图 标 会 自动 变 成 云 打 模样 。 

圆 10-3 本 例 分 别 采 用 云 函数 和 本 地 函数 实现 加 法 操作 和 减法 操作 ,请 对 比 
区 别 ,程序 运行 效果 如 图 10.23 和 图 10.24 所 示 。 


eesses WeChats 20:30 


云 开发 QuickStart 


图 10.23 云 函 数 在 控制 台 返 回 的 结果 图 10.24 ”小 程序 端 运 行 结果 


pages/firstcloudfunction/firstcloudfunction.wxml 的 代码 如 下 : 


<view class = "data">< input placeholder = "请 输入 a" focus = "true" bindinput = "binda"> 
</input ></view> 

< view class = " data"> < input placeholder = "请 输入 b" focus = "true" bindinput = "bindb"> 
</input ></view > 

< view class = "partition"></view> 

< view class = "arithmetic">< view bindtap = 'add'><button size= "mini" class = 'bt'> + </button 
></view >< view>{{add}}</view ></view> 

<view class = "arithmetic"> < view bindtap= 'sub'>< button size = "mini" class = 'bt' > 一 


</button ></view>< view>{{sub}}</view ></view> 
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pages/firstcloudfunction/firstcloudfunction.js 的 代码 如 下 : 


const app = getApp() 
Page({ 
data: { 


onLoad: function() { 


wx. cloud. callFunction({ 


success: function(res) { 
console. log( res) 
}, 
fail: function(res) { 
// 失 败 返回 时 的 操作 
} 
}) 
}, 
binda:function(e){ 
this. setData( { 
a: e. detail. value 
}) 
console. log(e. detail. value) 
}, 
bindb: function(e) { 
this. setData( { 
b: e. detail. value 
肝 
console. log(e. detail. value) 
}, 
add: function(e){ 
var that = this; 
wx. cloud. callFunction({ 
// 云 函数 名 称 
name: 'add', 
// 传 给 云 函 数 的 参数 
data: { 
a: that. data.a, 
b: that. data. b, 
}, 
success: function (res) { 
console. log(res. result. add) 
varc = res.result.add 
that. setData( { 
add: "a+b=" +c 


// 云 函数 名 称 


小 程序 云 开 发 1 0 
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}) 
}, 
fail: console. error 


}) 


}, 
sub: function(e) { 
varc = Number(this. data.a) - Number(this. data.b) 
console. log(c) 
this. setData( { 
sub: "a-b="+c 


}) 
} 
}) 


云 函 数 add/index.js 的 代码 如 下 : 


exports. main = async (event, context) =>{ 
return{add: Number (event. a) + Number (event. b)} 
} 


【代码 讲解 】 binda 和 bindb 两 个 点 击 函 数 从 firstcloudfunction.wxml 文件 中 获取 用 
户 输入 的 两 个 操作 数 a 和 bb, 减 法 函数 sub 是 普通 的 本 地 JavaScript 函数 ,而 加 法 函数 add 
则 采用 了 wx.cloud.callFunction() 接 口 调用 云 函数 add。 本 例 重点 是 云 函 数 的 创建 和 部 署 。 


10.3.2 ”Callback 风格 和 Promise 风格 


云 开 发 的 API 同时 支持 Callback 风格 和 Promise 风格 。 在 传人 API 的 Object 参数 
中 ,如 果 有 success \fail complete 字段 , 则 认为 是 采用 Callback 风格 ,API 方法 调用 不 返回 
Promise; 如 果 success、fail、complete 这 3 个 字段 都 不 存在 , 则 认为 是 采用 Promise 风格 ， 
API 方 法 调用 返回 一 个 Promise,Promise 风格 的 resolve 回调 如 同 Callback 风格 的 success 
回调 ,Promise 风格 的 reject 回调 如 同 Callback 风格 的 fail 回调 , 需 注意 的 是 Promise 风格 
的 resolve 回调 使 用 的 关键 字 是 then, reject 回调 使 用 的 关键 字 是 catch。 下 面 是 wx 


.cloud.uploadFile 接口 的 两 种 风格 写法 。 
Callback 风格 : 


wx. cloud. uploadFile({ 
cloudPath: "example. png', 
filePath; "*, 
success: res =>{ 
//get resource ID 
console. log(res. fileID) 
}, 
fail: err =>{ 
//handle error 
} 
}) 


Promise 风格 : 
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wx. cloud. uploadFile({ 
cloudPath: 'example. png', 
filePath: '', // 文 件 路 径 
}).then(res =>{ 
//get resource ID 
console. log(res. fileID) 
}).catch(error =>{ 
//handle error 


}) 
考虑 到 云 开发 的 云 函 数 涉及 云端 云 函 数 的 定义 和 小 程序 端 云 函数 的 调用 ,而 云端 和 小 
程序 端 都 可 以 支持 Callback 风格 和 Promise 风格 ,所 以 云 函 数 和 小 程序 存在 如 表 10.4 所 示 
的 风格 对 应 关系 。 
表 10.4 云 函 数 与 小 程序 的 4 种 风格 对 应 关系 


名 称 云 函 数 小 程 序 

对 应 关系 1 Callback 风格 结果 返回 形式 Callback 风格 调用 
对 应 关系 2 Callback 风格 结果 返回 形式 Promise 风格 调用 
对 应 关系 3 Promise 风格 结果 返回 形式 Callback 风格 调用 
对 应 关系 4 Promise 风格 结果 返回 形式 Promise 风格 调用 


[ 贺 10-4 本 例 在 例 10-3 的 基础 上 ,设计 了 云 函 数 与 小 程序 的 4 种 风 
格 关系 ,介绍 Callback 风格 和 Promise 风格 ,程序 运行 结果 如 图 10.25 和 
图 10.26 所 示 。 


视频 讲解 


Console Sources Network Securty AppData 


+b=10 v|® | Fner 
a+b=10 
a+b=10 Callback 风 格 add 云 函数 返回 结果 : 10 
Promjise 风 格 padd 云 函数 返回 结果 : 16 
a+b=10 Callback 风 格 add 云 函数 返回 结果 : 19 
Promise 风 格 padd 云 函数 返回 结果 : 16 
图 10.25 ”小 程序 端 运行 结果 图 10.26 控制 台 返 回 的 结果 


pages/firstcloudfunction/firstcloudfunction.wxml 的 代码 如 下 : 


<view class = "data"> < input placeholder = "请 输入 a" focus = "true" bindinput = "binda"> 
</input ></view > 

<view class = "data"> < input placeholder = "请 输入 b" focus = "true" bindinput = "bindb"> 
</input ></view > 

< view class = "partition"></view > 

<view class = "arithmetic">< view bindtap = ‘Callback1'>< button size = "mini" class= 'bt'> 
Callback 调 Callback </button></view><view>{{Callback1}}</view></view> 
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<view class = "arithmetic">< view bindtap = 'Callback2'>< button size = "mini" class = 'bt'> 
Callback 调 Promise </button ></view>< view>{f{fCallback2}}</view></view> 

<view class = "arithmetic">< view bindtap = 'Promisel '>< button size = "mini" class = 'bt' > 
Promise 调 Callback </button ></view>< view>{{Promisel}}</view></view> 

< view class = "arithmetic">< view bindtap = 'Promise2'>< button size = "mini" class = 'bt' > 
Promise 调 Promise </button ></view>< view>{{Promise2}}</view></view> 


pages/firstcloudfunction/firstcloudfunction.js 的 代码 如 下 : 


const app = getApp() 
Page({ 
data: { 
a:l, 
be 
Callback1l:'', 
Callback2:"'', 


Promisel: 


Promise2:'" 
}, 
binda:function(e){ 
this. setData( { 
a: e. detail. value 
}) 
console. log("a 的 值 是 " + e. detail. value) 
}, 
bindb: function(e) { 
this. setData( { 
b: e.detail. value 
}) 
console. log("b 的 值 是 "+ e. detail. value) 
}, 
Callbackl :function(e){ 
var that = this; 
wx. cloud. callFunction( { 
// 云 函数 名 称 
name: "add'， 
// 传 给 云 函数 的 参数 
data: { 
a: that. data.a, 
b: that. data. b, 
}, 
success: function(res) { 
console. log("Callback 风格 add 云 函数 返回 结果 是 " + res. result. add) 
varc = res.result.add 
that. setData({ 
Callbackl: " a+b="+cec 
}) 
}, 
fail: console. error 
]) 
}, 
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Callback2: function(e) { 
Var that = this; 


wx.cloud. callFunction({ 


// 云 函数 名 称 

name: "Padd'， 

// 传 给 云 函 数 的 参数 
data: { 


a: that. data.a, 
b: that. data. b, 
}, 
success: function(res) { 
console. log("Promise 风格 padd 云 函 数 返 回 结果 :" + res. result) 
varc = res.result 
that. setData( { 
Callback2: "a+b="+cec 
}) 
}, 
fail: console. error 
}) 
}, 
Promisel: function(e) { 
var that = this; 
wx. cloud. callFunction({ 
// 云 函数 名 称 
name: "add'， 
// 传 给 云 函数 的 参数 
data: { 
a: that. data.a, 
b: that. data. b, 
} 
}).then(res =>{ 
console. log("Callback 风格 add 云 函 数 返 回 结 果 :" + res. result.add) 
var c = res.result.add 
that. setData( { 
Promisel: "atb=" +c 
}) 
}).catch(error =>{ 
console. log("Callback 风格 add 云 函数 出 错 ") 
}) 
}, 
Promise2: function(e) { 
var that = this; 
wx. cloud. callFunction({ 
// 云 函数 名 称 
name: 'Padd'， 
// 传 给 云 函数 的 参数 
data: { 
a: that. data.a, 
b: that. data. b, 
}).then(res =>{ 
console. log("Promise 风格 Padd 云 函 数 返 回 结 果 :" + res. result) 


varc = res.result 
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that. setData({ 
Promise2: "at+b=" +c 
}) 
}).catch(error =>{ 
console. log("Promise 风格 Padd 云 函数 出 错 ") 
}) 
} 
}) 


云 函 数 add/index.js 的 代码 如 下 : 


exports. main = async(event, context) =>{ 
return{add: Number (event. a) + Number(event. b)} 
} 


云 函 数 Padd/index.js 的 代码 如 下 : 
// 云 函数 入 口 文件 


const cloud = require( 'wx— server — sdk') 

cloud. init() 

// 云 函数 入 口 函 数 

exports. main = async(event, context) =>{ 

return new Promise( (resolve, reject) =>{ 
setTimeout(() =>{ 
resolve( Number(event.a) + Number(event.b)) 
}, 1000) 
}) 

} 

【代码 讲解 】 本 例 根 据 表 10.4 设计 了 4 个 函数 : Callbackl 函数 以 Callback 风格 调用 
形式 调用 了 Callback 风格 结果 返回 的 add 云 函 数 ; Callback2 函数 以 Callback 风格 调用 形 
式 调用 了 Promise 风格 结果 返回 的 云 函数 Padd; Promisel 函数 以 Promise 风格 调用 形式 
调用 了 Callback 风格 结果 返回 的 add 云 函 数 ; Promise2 函数 以 Promise 风格 调用 形式 调用 
了 Promise 风格 结果 返回 的 Padd 云 函 数 。 请 注意 4 种 对 应 关系 之 间 的 区 别 ,并 选择 自己 熟 
悉 和 喜欢 的 方式 作为 日 后 云 函 数 的 编写 风格 。 

通常 ,小 程序 需要 在 云 函 数 中 处 理 一 些 异步 操作 ,在 异步 操作 完成 后 青 将 结果 返回 给 调 
用 方 。 所 以 例 10-4 中 的 Padd 云 函 数 在 采用 Promise 返回 结果 的 同时 ,还 采用 了 
setTimeout() 方 法 来 实现 异步 操作 ,注意 此 处 设置 的 等 待 时 请 小 于 3000 毫秒 。 


10.3.3 npm 和 wx-server-sdk 


1. npm 

云 函 数 的 运行 环境 是 Node.js, 在 7.1 节 WebSocket 内 容 中 使 用 了 Node.js 环境 ,新 版 
的 Node.js 已 自 带 npm, 安 装 Node.js 时 会 一 起 安装 ,npm 的 作用 就 是 对 Node.js 依赖 的 包 
进行 管理 ,也 可 以 把 npm 理解 为 用 来 安装 .卸载 Node.js 需要 的 组 件 的 一 个 管理 器 。 

在 云 函数 中 如 果 需 要 引入 第 三 方 依赖 来 帮助 更 快 地 开发 ,开发 者 需要 使 用 npm 安装 第 
三 方 依赖 。 例 如 需要 使 用 Node.js 提供 的 原生 HTTP 接口 在 云 函数 中 发 起 网 络 请 求 ,这 时 
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需要 使 用 npm 来 安装 第 三 方 依赖 wx-server-sdk。 

开发 者 在 本 地 开发 好 云 函数 后 选择 云端 安装 依赖 (不 上 传 node_modules 文件 夹 ) 或 全 
量 上 传 (同时 上 传 node_modules 文件 夹 ) 操 作 来 上 传 和 部 署 云 函 数 至 云端 ,而 后 就 可 以 通过 
API 接口 来 调用 云 函 数 ,说 明 腾 讯 云 已 经 默认 为 开发 者 的 云端 安装 好 了 Node.js 环境 。 

2. wx-server-sdk 

wx-server-sdk 是 微 信 小 程序 提供 的 第 三 方 依赖 包 , 云 函数 中 使 用 wx-server-sdk 需 在 
对 应 云 函数 目录 下 安装 wx-server-sdk 依赖 。 在 创建 云 函数 之 后 选择 "上 传 并 部 署 : 所 有 文 
件 ” 时 ,开发 者 工具 会 提示 本 地 没有 安装 wx-server-sdk 依赖 ,如 图 10.27 所 示 。 请 注意 云 函 
数 的 运行 环境 是 Node.js, 因 此 在 本 地 安装 依赖 包 时 务必 保证 已 安装 Node.js, 同 时 node 和 
npm 都 已 经 在 环境 变量 中 设置 好 。 


云 函 数 中 有 以 下 未 安装 的 依赖 ， 如 果 未 安装 
即 全 最 上 传 ， 有 可 能 云 函 数 无 法 使 用 ， 是 否 
确认 上 传 ? 

Wx-Server-sdk 


ms | EE 


图 10.27 开发 者 工具 本 地 提示 没有 安装 wx-server-sdk 


下 面 介 绍 wx-server-sdk 依赖 的 安装 方法 。 
(1) 新 建 一 个 云 函 数 ,函数 名 为 sdk, 布 击 该 云 函数 ,选择 “在 终端 中 打开 ”选项 ,如 
图 10.28 所 示 。 


ver ponepr 
bo sdk 

， 口 miniprograr 。 当前 环境 : mrchen 

口 READMETI 本 地 洞 试 

人 9) project con 上 传 并 部 署 : 云端 安装 依赖 (不 上 传 node_modules) 
上 传 并 部 署 :所 有 文件 

上 传 甬 发 由 

出 除 艇 发 器 

下 载 云 函数 

新 建 目录 

新 建 JS 

新 建 JSON 

新 建 FILE 


重 命名 
删除 
查找 


图 10.28 在 终端 中 打开 


(2) 在 弹出 的 cmd 窗口 中 输入 “npm install 一 save wx-server-sdk(@latest”, 如 图 10.29 
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所 示 ,等 待 大 概 20 秒 钟 ,wx-server-sdk 依赖 包 即 安装 完成 。 


国 选择 C\Windows\system32\cmd.exe 口 X 


图 10.29 cmd 安装 wx-server-sdk 


(3) 当 安 装 完 成 之 后 ,打开 项 目下 的 cloudfunctions 
文件 夹 下 的 sdk 文件 夹 , 如 图 10.30 所 示 , 文 件 夹 下 多 了 
-个 node_modules 文件 夹 和 package-lock.json 文件 ， 


cloudfunctions > sdk vO 押 


node_modules 


这 说 明 wx-server-sdk 依赖 包 安 装 成 功 。 indexjs 
3. 什么 时 候 需 要 用 到 wx-server-sqk 0 
大 部 分 接触 云 开发 的 初学 者 不 清楚 什么 时 候 需 要 
安装 wx-server-sdk 依赖 包 , 导 致 在 创建 任何 云 函 数 时 图 10.30 ”sdk 文件 夹 


都 安装 它 ,而 wx-server-sdk 依赖 包 的 大 小 大 约 为 9MB， 
如 果 每 一 个 云 函数 都 对 其 进行 安装 的 话 , 云 函数 上 传 和 部 署 至 云端 之 后 ,有 限 的 云 空间 
不 够 用 。 现 对 需要 使 用 wx-server-sdk 依赖 包 的 情况 总 结 如 下 

(1) 在 云 函 数 中 调用 其 他 云 函 数 

- 般 情况 下 是 小 程序 端 调用 云 函数 的 ,这 时 候 不 需要 使 用 wx-server-sdk 依赖 包 。 假 
设 开发 者 要 在 云 函 数 A 中 调用 云 函数 B, 则 需要 在 云 函 数 A 中 安装 wx-server-sdk 依 
赖 包 。 

(2) 需要 使 用 服务 端 API 的 云 函数 

云 开发 的 API 分 为 小 程 API 和 服务 端 API, 以 云 存储 的 文件 上 传 功能 为 例 

小 程序 端 文件 上 传 API 示 例 代 码 : 


wx. cloud. uploadFile( { 
cloudPath: 'example. png', 
filePath: '', // 文 件 路 径 
success: res =>{ 
//get resource ID 
console. log(res. fileID) 
}, 
fail: err =>{ 
//handle error 


]) 
服务 器 文件 上 传 API 示例 代码 : 
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const cloud = require('wx— server- sdk') 
const fs = require('fs') 
const path = require('path') 
exports. main = async(event, context) => { 
const fileStream = fs.createReadStrean(path. join(_dirname, 'demo. jpg')) 
return await cloud. uploadFile( { 
cloudPath: 'demo. jpg', 
fileContent: filestreanm, 
}) 
} 


在 云 函 数 中 使 用 服务 端 API 接口 时 ,必须 先 安 装 wx-server-sdk 依赖 包 。 

需要 特别 说 明 的 是 云 函 数 属于 管理 端 ,在 云 函 数 中 运行 的 代码 拥有 不 受 限 的 数据 库 读 
写 权限 和 云 文件 读 写 权 限 。 如 果 想 不 受 限制 地 对 数据 库 和 云 文件 进行 操作 ,需要 在 云 函 数 
中 使 用 服务 端 API 接口 。 例 如 在 小 程序 端 用 户 只 能 对 自己 创建 的 数据 进行 修改 和 删除 操 
作 , 如 果 想 让 普通 用 户 可 以 对 所 有 的 数据 进行 修改 和 删除 操作 ,可 以 把 相关 代码 写 在 云 函 数 
中 ,这 样 就 突破 了 权限 的 限制 问题 。 

当 云 函数 中 使 用 了 wx-server-sdk 依赖 包 , 云 函数 按照 图 10.28 一 图 10.30 所 示 的 步骤 
部 署 至 云端 时 , 需 选 择 * 上 传 并 部 署 : 所 有 文件 ”选项 ,而 不 是 * 上 传 并 部 署 : 回 
云端 安装 依赖 (不 上 传 node_modules) "选项 。 

[ 贺 10-5 本 例 设计 一 个 云 函数 调用 另 一 个 云 函数 ,根据 本 节 中 关于 
wx-server-sdk 应 用 场景 的 知识 点 , 主 调 云 函数 需要 安装 wx-server-sdk 依 回 
赖 包 。 程 序 运 行 结果 如 图 10.31 和 图 10.32 所 示 。 i 


“e000 WeChats 


图 10.31 小 程序 端 运行 结果 图 10.32 控制 台中 返回 结果 


pages/sdk/sdk.wxml 的 代码 如 下 : 


<view class = "data">< input placeholder = "请 输入 a" focus = "true" bindinput = "binda"> 
</input ></view > 

<view class = "data">< input placeholder = "请 输入 b" focus = "true" bindinput = "bindb"> 
</input ></view > 

< view class = "partition"></view > 

< view class = "arithmetic">< view bindtap = 'sdk'>< button size = "mini" class = 'bt' > sdk 调用 
add 加 法 </button ></view>< view>{{sdk}}</view></view> 


pages/sdk/sdk.js 的 代码 如 下 : 
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const app = getApp() 
Page({ 
data: { 
a:1,b:1,sdk:"" 
}, 
binda:function(e){ 
this. setData( { 
a: e. detail. value 
}) 
console. log("a 的 值 是 " + e. detail. value) 
}, 
bindb: function(e) { 
this. setData( { 
b: e. detail. value 
}) 
console. log("b 的 值 是 "” + e. detail. value) 
}, 
sdk:function(e){ 
var that = this; 
wx. cloud. callFunction({ 
// 云 函数 名 称 
name: 'sdk', 
// 传 给 云 函 数 的 参数 
data: { 
a: that. data.a, 
b: that. data. b, 
}, 
success: function(res) { 
console. log(res) 
console. 10g(" 通 过 sdk 云 函 数 间接 调用 add 云 函数 ,结果 : " + res. result. result. add) 
varc = res.result.result.add 
that. setData( { 
Sk: "at+b="+eC 
}) 
}, 
fail: console. error 
汶 
} 
入 


云 函 数 sdk/index.js 的 代码 如 下 : 


const cloud = require('wx— server— sdk') 
cloud. init() 
exports. main = async(event, context) =>{ 
return await cloud. callFunction({ 
nanme: "add", 
data:{ 


a: event.a, 
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b: event.b 
} 
}) 
} 


云 函 数 add/index.js 的 代码 如 下 : 


exports. main = async(event, context) =>{ 
return { add: Number(event.a) + Number(event.b) } 

} 

【代码 讲解 】 本 例 在 小 程序 端 sdk.js 中 的 本 地 函数 sdk 调用 云 函 数 sdk, 云 函数 sdk 又 
调用 了 另外 一 个 云 函数 add, 在 云 函数 sdk 中 需要 安装 wx-server-sdk 依赖 包 。 本 例 需要 特 
别 注意 的 是 如 图 10.32 所 示 的 返回 结果 中 add 所 在 的 层次 , 云 函 数 sdk 调用 云 函 数 add 的 
返回 结果 为 res. result.add, 而 本 地 小 程序 调用 云 函 数 sdk 的 返回 结果 为 res. result 


.result.add。 


10.4 云 数据 库 


在 10.1.2 节 中 介绍 了 使 用 云 开发 控制 台 管 理 云 数据 库 , 本 节 从 代码 操作 的 角度 讲解 云 
数据 库 的 操作 ,包含 云 数 据 库 的 增删 改 查 操作 。 


10.4.1 数据 类 型 和 权限 控制 


1. 云 数据 库 中 的 数据 类 型 
云 开 发 数据 库 提供 以 下 几 种 数据 类 型 。 
。 String: 字符 串 ; 
。 Number: 数字 ; 
Object: 对 象 ; 

。 Array: 数组 ; 

。 Bool: 布尔 值 ; 

。 GeoPoint: 地 理 位 置 点 ; 

。 Date: 时 间 ; 

。 Null: 占 位 符 。 

下 面 对 几 个 需要 额外 说 明 的 字段 做 以 下 补充 说 明 。 

1) Date 

Date 类 型 用 于 表示 时 间 ,精确 到 毫秒 ,在 小 程序 端 可 用 JavaScript 内 置 的 Date 对 象 创 
建 。 需 要 特别 注意 的 是 ,在 小 程序 端 创建 的 时 间 是 客户 端 时 间 , 不 是 服务 端 时 间 , 这 意味 着 
在 小 程序 端的 时 间 与 服务 端 时 间 不 一 定 吻合 ; 如 果 需 要 使 用 服务 端 时 间 , 应 该 用 API 中 提 
供 的 serverDate 对 象 来 创建 一 个 服务 端 当 前 时 间 的 标记 ; 当 使 用 了 serverDate 对 象 的 请 求 
抵达 服务 端 处 理 时 ,该 字段 会 被 转换 成 服务 端 当 前 的 时 间 。 
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2) GeoPoint 

GeoPoint 类 型 用 于 表示 地 理 位 置 点 ,用 经 度 和 纬度 唯一 标记 一 个 点 ,这 是 一 个 特殊 的 
数据 存储 类 型 。 注 意 ,如 果 需 要 对 类 型 为 地 理 位 置 的 字段 进行 查找 ,一 定 要 建立 地 理 位 置 索 
引 。 具 体 的 地 理 位 置 API 可 参考 Geo API 文档。 

3) Null 

Null 相当 于 一 个 占 位 符 , 表 示 一 个 字段 存在 但 是 值 为 空 。 

2. 云 数 据 库 中 的 权限 控制 

对 云 数据 库 的 权限 控制 分 为 小 程序 端 和 管理 端 ,管理 端 包括 云 函 数 端 和 控制 台 。 小 程 
序 端 对 数据 库 的 操作 是 受权 限 控制 限制 的 ,而 管理 端 对 数据 库 的 操作 则 不 受权 限 控制 限制 。 

云 开 发 数据 库 开 放 以 下 几 种 权限 配置 按照 权限 级 别 从 宽 到 紧 排 列 。 

。 仅 创 建 者 可 写 , 所 有 人 可 读 : 数据 只 有 创建 者 可 写 、 所 有 人 可 读 , 如 文章 ; 

。 仅 创 建 者 可 读 写 : 数据 只 有 创建 者 可 读 写 ,其 他 用 户 不 可 读 写 ,如 私密 相册 ; 

。 仅 管 理 端 可 写 , 所 有 人 可 读 : 该 数据 只 有 管理 端 可 写 , 所 有 人 可 读 , 如 商品 信息 ; 

。 仅 管理 端 可 读 写 : 该 数据 只 有 管理 端 可 读 写 ,如 后 台 用 的 不 暴露 的 数据 。 

每 个 集合 可 以 拥有 一 种 权限 配置 ,权限 配置 的 规则 是 作用 在 集合 的 每 个 记录 上 的 。 出 
于 易 用 性 和 安全 性 的 考虑 , 云 开发 为 云 数据 库 做 了 小 程序 深度 整合 ,在 小 程序 中 创建 的 每 个 
数据 库 记 录 都 会 带 有 该 记录 创建 者 ( 即 小 程序 用 户 ) 的 信息 ,以 _openid 字段 将 用 户 的 
openid 保存 在 每 个 相应 用 户 创建 的 记录 中 。 因 此 ,权限 控制 也 相应 围绕 着 一 个 用 户 是 否 应 
该 拥有 权限 操作 其 他 用 户 创建 的 数据 展开 。 

在 云 开 发 控制 台 可 以 对 数据 库 进行 权限 设置 ,如 图 10.33 所 示 。 


| 


《7 云 开发 控制 台 


四 IE 日 区 


云 控 制 台 和 服务 端 始 终 有 所 有 数据 读 写 权限 ， 以 下 配置 仅 
对 于 集合 中 的 每 条 数据 记录 
所 有 用 户 可 读 ， 仅 创建 者 可 读 写 
用 户 评论 、 用 户 公开 信息 等 


加 仅 创 建 者 可 读 写 
适用 场景: 用 户 个 人 设置 、 用 户 订单 管理 等 


所 有 用 户 可 读 
适用 场景 : 商品 信息 等 


所 有 用 户 不 可 读 写 
适用 场景 : 后 台 流水 数据 等 


图 10.33 云 开发 控制 台中 设置 数据 库 权 限 


从 图 10.33 可 以 看 出 数据 库 权限 是 设置 在 集合 这 个 层次 , 云 开 发 数据 库 的 集合 对 应 于 
关系 型 数据 库 中 的 表 的 概念 。 
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小 程序 端 对 数据 库 的 操作 权限 如 表 10.5 所 示 。 
表 10.5 小 程序 端 对 数据 库 操作 权限 表 


小 程序 端 小 程序 端 小 程序 端 小 程序 端 管理 端 
模 式 读 自 己 创建 | 写 自己 创建 | 读 他 人 创建 | 写 他 人 创建 | 读 写 任意 
的 数据 的 数据 的 数据 的 数据 数据 
仅 创 建 者 可 写 , 所 有 人 可 读 V/ V/ ~ x V 
仅 创 建 者 可 读 写 V V x x Re 
仅 管 理 端 可 写 , 所 有 人 可 读 Vv x V NA 
仅 管 理 端 可 读 写 (该 数据 只 . . _ y 
有 管理 端 可 读 写 ) . 


10.4.2 ”查询 数据 


在 开始 使 用 数据 库 API 进行 增删 改 查 操作 之 前 ,需要 先 获取 数据 库 的 引用 。 以 下 调用 
获取 默认 环境 的 数据 库 的 引用 : 

const db = wx.cloud. database() 

要 操作 一 个 集合 , 需 先 获取 它 的 引用 。 在 获取 了 数据 库 的 引用 后 ,就 可 以 通过 数据 库 引 
用 上 的 collection 方法 获取 一 个 集合 的 引用 了 ,例如 获取 待 办 事项 清单 集合 : 

const collection = db.collection( 'dbl') 

(1) 通过 collection.doc 获取 某 一 条 记录 。 

如 果 需 要 对 具体 的 某 一 条 记录 进行 更 新 和 删除 操作 ,假设 有 一 个 待 办 事项 的 id 为 
record20190801 ,那么 可 以 通过 collection.doc 方法 获取 它 的 引用 : 

const document = db.collection( 'dbl').doc('record20190801') 

(2) 通过 collection.get 获取 所 有 记录 。 

通过 collection.get 获取 集合 中 的 所 有 数据 ,或 获取 根据 查询 条 件 筛选 后 的 集合 数据 ， 
其 成 功 回调 函数 success 的 结果 及 Promise resolve 的 结果 Result 是 一 个 数组 对 象 , 对 应 多 
条 记录 。 

(3) 通过 document.get 获取 某 一 条 记录 的 数据 。 

通过 document. get 获取 具体 某 一 条 记录 的 数据 ,或 获取 根据 查询 条 件 筛选 后 的 记 
录 数 据 , 其 success 回调 的 结果 及 Promise resolve 的 结果 Result 是 一 个 对 象 , 对 应 一 条 
记录 。 


401 


开发 从 入 门 到 实战 微 课 视频 版 


[ 夯 ]10-6 通过 云 开发 控制 台 创 建 集合 dbl ,然后 添加 多 条 记录 ,记录 的 字段 分 别 为 
name(string)、password (string) .age (number)、 sex (string) tel (Cstring)。 本 例 通过 
collection.get 获取 集合 中 的 所 有 数据 ,通过 document.get 获取 具体 某 一 条 记录 的 数据 , 获 
取 的 云 数据 库 的 数据 如 图 10.34 所 示 。 


两 个 get 


doc.get 获 取 一 条 记录 
张 三 --zhangsan--28--man--18888888888 

视频 讲解 Collection.get 获取 多 条 记录 

张 三 --zhangsan--28--man--18888888888 


地 四 --lisi--30--woman--18888887777 

B 王 五 --wangwu--30--woman--18888886666 
M 陈 生 --chensheng--22--man--18888885555 
5 黎 生 --lisheng--25--man--18888884444 

6 杨 
刘 落 --liusha--24--woman--18888882222 


-yangbo--50--man--18888883333 


陆 老 师 --han--55--man--18888880002 
摩 老师 -li--60--woman--18888881111 


图 10.34 ”get 操作 运行 结果 
pages/get/get.wxml 的 代码 如 下 : 


<view class = "doc" bindtap = "docget"> doc. get 获取 一 条 记录 </view> 
<view class = "list— item" bindtap = "testCgi"> 
< text class = "request - text">{{docget. name} } -- {{docget. password}} 
—— {{docget. age}} -- {{docget. sex}} -- {{docget. tel}}</text > 
</view> 
<view class = "doc" bindtap = "Collectionget"> Collection. get 获取 多 条 记录 </view> 
<view wx:for = "{{Collectionget}}"> 
<view class= "list ~ item" bindtap = "testCgi"> 
< text class = "request - text">{{ item. name}} -- {{item. password}} 


—— {{item.age}} -- {{item. sex}} —— {{item. tel}}</text > 
</view> 
</view> 


pages/get/get.js 的 代码 如 下 : 


const app = getApp() 
Page({ 
data: { 
docget:{}, 
Collectionget:[] 
} 
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docget :function(e){ 
var that = this 
const db = wx.cloud. database() 
db. collection( 'db1'). doc( 'b9eb782f — 9818 — 45df - ab22 — 8f0f56fa05fc').get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
docget: res. data 
}) 
} 
]) 
] 
Collectionget:function(e){ 
Var that = this 
const db = wx.cloud. database() 
db. collection( 'dbl').get({ 
success: function(res) { 
console. log(res. data) 
that. setData({ 
Collectionget: res. data 


【代码 讲解 】 docget 函数 通过 document. get() 接 口 获取 具体 某 一 条 记录 的 数据 。 
Collectionget 函数 通过 collection.get() 接 口 获 取 集 合 中 的 所 有 数据 ,注意 两 个 方法 获取 的 
数据 都 在 res.data 中 。 

(4) 通过 collection.count 获取 集合 记录 数量 。 

通过 collection.count 统计 集合 记录 数 或 统计 查询 语句 对 应 的 结果 记录 数 ,注意 这 与 集 
合 权 限 设置 有 关 ,一 个 用 户 仅 能 统计 其 有 读 权 限 的 记录 数 。success 回调 的 结果 及 Promise 
resolve 的 结果 Result 是 一 个 number 类 型 的 对 象 total 。 

(5) 通过 collection.where 条 件 查询 。 

通过 collection.where 指定 筛选 条 件 ,方法 签名 如 下 : 


function where(rule: object) : Query 


该 方法 接受 一 个 必 填 对 象 参 数 rule, 用 于 定义 筛选 条 件 ,示例 代码 如 下 : 


const db = wx.cloud. database() 
db. collection( 'dbl').where({ 

age: 30 // 查 询 年 龄 为 30 岁 的 记录 
}).get({ 

success: console. 10g, 

fail: console. error 


]) 
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(6) 通过 collection.orderBy 排序 查询 。 
通过 collection.orderBy 指定 查询 排序 条 件 , 方 法 签名 如 下 : 


function orderBy(fieldName: string，order: string) : collection | query 


该 方法 接受 一 个 必 填 字符 串 参 数 fieldName 用 于 定义 需要 排序 的 字段 ,一 个 字符 串 参 
数 order 用 于 定义 排序 顺序 ,只 能 取 asc 或 desc。 

如 果 需 要 对 内 套 字段 排序 ,需要 用 ”点 表示 法 "连接 嵌 套 字段 ,例如 style.color 表示 字段 
style 里 的 柑 套 字段 color。 如 果 要 按 多 个 字段 排序 ,多 次 调用 orderBy 即 可 ,多 字段 排序 时 
会 按照 orderBy 调用 顺序 先后 对 多 个 字段 排序 。 

按 一 个 字段 排序 示例 代码 : 

const db = wx.cloud. database() 


db. collection( 'db1'). orderBy( 'age', 'asc') // 按 age 升序 排序 
.get().then(console. 10g).catch(console. error) 


按 多 个 字段 排序 示例 代码 : 


const db = wx.cloud. databasel() 

db. collection( 'dbl') 

.orderBy('age'，'desc') // 按 age 降序 
.orderBy( 'tel', 'asc') // 按 tel 升序 
.get( ) .then(console. log) . catch(console. error) 


[ 贺 10-7 本 例 和 例 10-6 使 用 同一 个 云 数据 库 集合 dbl。 本 例 使 用 where 条 件 查询 和 
orderby 排序 查询 对 云 数据 库 的 数据 进行 查询 操作 。 程 序 运行 结果 如 图 10.35 所 示 。 


ere 查 询 男人 记录 
张 三 --zhangsan--28--man--18888888888 


视频 讲解 陈 生 --chensheng--22--man--18888885555 


5 黎 生 --lisheng--25--man--18888884444 

有 杨波 -yangbo--50--man--18888883333 

Prderby 按 age 升序 排序 

MH 陈 生 --chensheng--22--man--18888885555 

『 刘 菠 --liusha--24--woman--18888882222 

b 牧 生 --lisheng--25--man--18888884444 
hangsan--28--man--18888888833 

30--woman--18888887777 
--wangwu--30--woman--18888886666 
杨波 --yangbo--50--man--18888883333 


图 10.35 ”where 和 orderby 操作 
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pages/where-orderby/where-orderby.wxml 的 代码 如 下 : 


< view class = "doc" bindtap = "where"> where 查询 男人 记录 </view> 
< View wx:for = "{{where}}"> 
<view class = "list — item" bindtap = "testCgi"> 
< text class = "request - text">{{item. name}} -- {{item. password}} 
—— {{item. age}} -- {{item. sex}} —— {{item. tel}}</text > 
</view> 
</view> 


loc" bindtap = "orderby"> orderby 按 age 升序 排序 </view> 
<view wx:for = "{{orderby}}"> 
<view class = "list ~ item" bindtap = "testCgi"> 
< text class = "request - text">{{ item. name}} -- {{item. password}} 
—— {{item.age}} -- {{item. sex}} -- {{item. tel}}</text > 
</view> 
</view> 


< view class 


pages/where-orderby/where-orderby.js 的 代码 如 下 ， 


const app = getApp() 
Page({ 
data: { 
where: [ ]， 
orderby:[] 
$e 
where:function(e){ 
var that = this 
const db = wx.cloud. database() 
db. collection( 'dbl').where({ 
sex:"man" }).get({ 
success: function(res) { 
console. log(res. data) 
that. setData({ 
where: res. data 
}) 
} 
}) 
所 
orderby:function(e){ 
var that = this 
const db = wx.cloud. database() 
db. collection( 'db1'). orderBy( 'age', 'asc') .get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
orderby: res. data 
}) 


}) 
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【代码 讲解 】 请 注意 where 和 orderby 操作 应 该 在 collection 和 get 操作 的 中 间 ,因为 
collection.get 是 获取 集合 中 的 所 有 记录 ,对 所 有 记录 排序 和 条 件 查询 ,where 和 orderby 操 
作 应 在 get 操作 之 前 。 另 外 需要 注意 的 是 ,get 操作 得 到 的 数据 是 多 条 记录 ,应 该 赋值 给 一 
个 数组 。 

(7) 通过 collection.limit 指定 查询 结果 集 数量 上 限 。 

通过 collection.limit 指定 查询 结果 集 数 量 上 限 ,方法 签名 如 下 : 


function limit(max: number): collection | query 
示例 代码 如 下 : 


const db = wx.cloud. database() 

db. collection( 'todos'). limit(10) 

.get().then(console. 1og) . catch(console.error) 

(8) 通过 collection.skip 跳 过 若干 条 记录 。 

通过 collection.skip 指定 查询 返回 结果 时 从 指定 序列 后 的 结果 开始 返回 ,常用 于 分 页 ， 
方法 签名 如 下 : 


function skip(offset: number) : collection | query 


示例 代码 如 下 : 


const db = wx.cloud. database() 

db. collection( 'todos'). skip(10) 

.get().then(console. 10g).catch(console. error) 

(9) 通过 collection.field 指定 返回 字段 。 

通过 collection.field/query.field/document.field 指定 返回 结果 中 记录 需 返 回 的 字段 ， 
方法 签名 如 下 : 


function field(definition: object): collection | query | document 
该 方法 接受 一 个 必 填 字段 用 于 指定 需 返 回 的 字段 ,示例 代码 如 下 : 


const db = wx.cloud.database() 
db. collection( 'todos'). field({ 

name: true, sex: true, tel: true 
}).get().then(console. 1og) . catch(console. error) 


忆 中 [ 夯 ]10-8 本 例 和 例 10-6 使 用 同一 个 云 数据 库 集合 dbl ,输入 了 7 条 数 
中 “ 据 , 并 在 每 一 条 数据 的 name 字段 以 数字 开头 。 本 例 使 用 field limit 和 skip 
国 弹 浪 江 起 ”进行 查询 操作 ,程序 运行 结果 如 图 10.36 所 示 。 
视频 讲解 pages/field-limit-skip/field-limit-skip.wxml 的 代码 如 下 : 


<view class = "doc" bindtap = "field"> field 只 显示 name age 和 tel 字段 </view> 
<view wx:for = "{{field}}"> 
<view class = "list — item" bindtap = "testCgi"> 
< text class = "request - text">{{item. name}} -- {{item. age}} 
—— {{item. tel}} </text> 
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</view> 
</view> 
<view class = "doc" bindtap = "limit"> limit 只 要 3 条 记录 </view> 
< view wx:for ="{{1imit}}"> 
<view class = "list — item" bindtap = "testCgi"> 
< text class = "request ~ text">{{item. name} } —— {{item. password}} 
—— {{item. age}} -- {{item. sex}} —— {{item. tel}} </text > 
</view> 
</view> 
loc" bindtap = "skip"> skip 跳 4 条 记录 </view> 
< view wx:for ="{{skip}}"> 
<view class = "list — item" bindtap = "testCgi"> 
< text class = "request - text">{{item. name}} -- {{item. password}} 
—— {{item.age}} -- {{item. sex}} -- {{item. tel}} </text > 


<view class 


</view> 
</view> 


eld 只 显示 name、age 和 tel 字 段 
1 张 三 --28--18888888888 
2 李 四 --30--18888887777 
B 王 五 --30--18888886666 
MM 陈 生 --22--18888885555 
5 黎 生 --25--18888884444 
上 6 杨波 --60--18888883333 


1 张 三 --zhangsan--28--man--18888888888 

2 李 四 --lisi--30--woman--18888887777 

3 王 五 -wangwu--30--woman--18888886666 
skip 跳 4 条 记录 

5 黎 生 --lisheng--25--man--18888884444 

|6 杨 波 --yangbo--60--man--18888883333 

7 刘 落 --liusha--24--woman--18888882222 


图 10.36 field limit 和 skip 操作 
pages/field-limit-skip/field-limit-skip.js 的 代码 如 下 : 


Page( { 
data: { 
limit:{}, skip:[], field:[] 
}, 
limit:function(e){ 
var that = this 


407 


开发 从 入 门 到 实战 微 课 视频 版 


const db = wx.cloud. database() 
db. collection('db1'). limit(3).get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
limit: res. data 
}) 
} 
]) 
}, 
skip:function(e){ 
var that = this 
const db = wx.cloud. database() 
db. collection( 'dbl'). skip(4).get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
skip: res. data 
}) 
} 
}) 
}, 
field: function(e) { 
var that = this 
const db = wx.cloud. database() 
db. collection( 'db1'). field({ 
name: true, age: true, tel: true 
}).get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
field: res. data 
}) 


【代码 讲解 】 field 操作 只 获取 指定 的 字段 ,本 例 中 只 显示 name、age 和 tel 3 个 字段 。 
limit 操作 限定 获取 记录 的 总 条 数 。skip 操作 跳 过 指定 条 数 的 记录 ,常用 于 分 页 显示 。 这 3 
种 操作 是 对 get 操作 的 有 效 补充 。 

(10) 通过 command 查询 指令 。 

原始 的 where 条 件 查询 只 能 查询 “等 于 ”的 情况 ,例如 以 下 语句 是 查询 性 别 是 man 的 所 
有 记录 : 


db. collection( 'todos').where({ 


}) 
当 需 要 查询 “大 于 ”“ 小 于 “大 于 或 等 于 ”与 ”等 特殊 条 件 查 询 的 时 候 ,where 语句 已 经 不 
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能 胜任 ,这 时 需要 使 用 db.command 获取 数据 库 查 询 指令 。command (db.command) 对 象 查询 
指令 如 表 10.6 所 示 。 


表 10.6 command 查询 指令 


API 说 明 API 说 明 

eq 等 于 指定 值 gte | 大 于 或 等 于 指定 值 

neq 不 等 于 指定 值 in 在 指定 数组 中 

lt 小 于 指定 值 nin | 不 在 指定 数组 中 

lte 小 于 或 等 于 指定 值 and | 条 件 与 ,表示 需 同时 满足 另 一 个 条 件 

gt 大 于 指定 值 or 条 件 或 ,表示 如 果 满 足 另 一 个 条 件 也 匹配 
示例 代码 如 下 : 
sex: _.eq("man") //sex 等 于 man 的 记录 
age: _.1t(30) //age 小 于 30 的 记录 
age: _.1lte(30) //age 小 于 或 等 于 30 的 记录 
age: _.gt(30) //age 大 于 30 的 记录 
age: _.gte(30) //age 大 于 或 等 于 30 的 记录 
age: _. in([20,30,40,50]) //age 是 20、30、40、50 的 记录 
age: _.nin([20,30,40,50]) //age 不 是 20、30、40、50 的 记录 
age: _.gt(30).and(_.1t(50)) //age 大 于 30 小 于 50 的 记录 
age: _.gt(50).or(_.1t(30)) //age 大 于 50 或 者 小 于 30 的 记录 


咒 10-9 本 例 和 例 10-6 使 用 同一 个 云 数据 库 集合 dbl, 使 用 
command.let 和 command.in 对 数据 库 进行 查询 操作 ,程序 运行 结果 如 
图 10.37 所 示 。 


视频 讲解 


i 张 三 --zhangsan--28--man--18888888888 
Pp 地 四 --lisi--30--woman--18888887777 

王 五 --wangwu--30--woman--18888886666 
陈 生 --chensheng--22--man--18888885555 
5 黎 生 --lisheng--25--man--18888884444 
刘 荡 --liusha--24--woman--18888882222 
n 在 25 和 30 岁 之 间 的 记录 

了 地 四 --lisi--30--woman--18888887777 

王石 --wangwu--30--woman--18888886666 
5 黎 生 --lisheng--25--man--18888884444 


图 10.37 command 查询 指令 操作 
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pages/command/command.wxml 的 代码 如 下 : 


<view class = "doc" bindtap = "lte"> lte 小 于 等 于 30 岁 的 记录 </view> 

"{{1te}}"> 

list — item" bindtap = "testCgi"> 

< text class = "request - text">{ {item. name}} -- {{item. password}} 
{{item.age}} -- {{item. sex}} -- {{item. tel}}</text > 


</view> 


< view wx:for 


<view class= 


</view> 
< view class = "doc" bindtap = "in"> in 在 25 和 30 岁 之 间 的 记录 </view> 
<view wx:for = "{{in}}"> 
<view class = "list — item" bindtap = "testCgi"> 
< text class = "request - text">{{item. name}} -- {{item. password}} 
{{item.age}} -- {{item. sex}} -- {{item. tel}} </text > 
</view> 
</view> 


pages/command/command.js 的 代码 如 下 : 


Page({ 
data: { 
lte:{}, in:[] 
}, 
lte:function(e){ 
var that = this 
const db = wx.cloud. database() 
const _ = db.command 
db. collection( 'dbl'). where({ 
age: _.1lte(30) 
}).get({ 
success: function (res) { 
console. log(res. data) 
that. setData( { 
lte: res. data 
}) 
} 
}) 
}, 
in:function(e){ 
var that = this 
const db = wx.cloud. database() 
const _ = db.command 
db. collection( 'db1'). where({ 
age: _. in([25, 30]) 
}).get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
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【代码 讲解 】 in 操作 需要 特别 注意 ,age: _.in([25, 30]) 是 age 等 于 25 或 者 等 于 30 的 
记录 ,不 是 25 一 30 的 记录 。 


10.4.3 ”插入 数据 


10.1.2 节 中 介绍 了 使 用 云 开发 控制 台 创 建 集合 和 记录 ,但 对 数据 的 操作 更 多 是 发 生 在 
程序 端 。 小 程序 提供 了 add 方法 向 集合 中 插入 一 条 记录 ,方法 签名 如 下 : 


function add(options: object): Promise < Result > 
add 方法 属性 如 表 10.7 所 示 。 
表 10.7 ”add 方法 属性 表 


字段 名 类 型 必 填 说 明 
data Object 是 | 新 增 记录 的 定义 
Success Function 否 | 成 功 回调 ,回调 传人 的 参数 Result 包含 查询 的 结果 ,Result 定义 见 下 方 
fail Function 否 | 失败 回调 
complete Function 否 | 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执行 ) 
add 方法 success 回调 的 结果 及 Promise resolve 的 结果 Result 是 一 个 


String 类 型 的 _id, 即 新 增 的 记录 的 ID。 
[ 贺 10-10 本 例 和 例 10-6 使 用 同一 个 云 数据 库 集合 db1, 使 用 add 方 
法 向 集合 中 插入 记录 ,程序 运行 结果 如 图 10.38 所 示 。 


视频 讲解 


重 入 之 前 大 于 等 于 30 岁 的 记录 
p 李 四 --lisi--30--woman--18888887777 


王 五 --wangwu--30--woman--18888886666 
6 杨波 --yangbo--50--man--18888883333 
pdd 插 入 之 后 大 于 等 于 30 岁 的 记录 

p 李 四 --lisi--30--woman--18888887777 

B 王 五 --wangwu--30--woman--18888886666 
6 杨波 --yangbo--50--man--18888883333 
陆 老 师 --han--60--man--18888880002 


图 10.38 使 用 add 插入 数据 前 后 
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pages/add/add.wxml 的 代码 如 下 : 


<view class = "doc" bindtap = "lte"> 插 入 之 前 大 于 等 于 30 岁 的 记录 </view> 
<view wx:for ="{{lte}}"> 
<view class = "list — item" bindtap = "testCgi"> 
< text class = "request - text">{ {item. name} } -- {{item. password}} -- {{item. age}} 
—— {{item. sex}} -- {{item. tel} }</text > 
</view> 
</view> 
< view class = "doc" bindtap = "add"> add 插入 之 后 大 于 等 于 30 岁 的 记录 </view> 
< View wx:for = "{{add}}"> 
<view class = "list — item" bindtap = "testCgi"> 
< text class = "request - text">{{ item. name}} -- {{item. password}} -一 
{{item.age}} -- {{item. sex}} -- {{item. tel}} </text > 
</view> 


</view> 
pages/add/add.js 的 代码 如 下 : 


Page( { 
data: { 
lte:{},add:[] 
}, 
lte:function(e){ 
var that = this 
const db = wx.cloud. database() 
const _ = db.command 
db. collection( 'dbl'). where({ 
age: _.gte(30) 
}).get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
lte: res. data 
}) 
} 
}) 
}, 
add: function(e){ 
var that = this 
const db = wx.cloud. database() 
const _ = db.command 
db. collection( 'dbl').add({ 
data: { // 插 入 的 值 
age: 60，name: " 韩 老 师 "，password:"han"，sex:"man"，tel:"18888880002" 
]} 
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success: function(res) { // 插 入 成 功 之 后 查询 
console. log(res) 
db. collection( 'dbl'). where({ 
age: _.gte(30) 
}).get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
add: res. data 


}) 


【代码 讲解 】 add 操作 会 返回 一 个 ”id”, 该 值 是 成 功 插入 的 记录 的 id 值 ,程序 可 以 通 
过 检查 是 否 返回 了 ” id" 来 判断 是 否 成 功 插入 , 若 没 有 返回 ”id? 则 说 明 没 有 搬入 成 功 。 


10.4.4 ”更 新 数据 


小 程序 提供 了 两 个 API 对 云 数 据 库 进行 记录 的 更 新 操作 : update 方法 更 新 一 条 或 多 
条 记录 的 局 部 字段 ; set 方法 替换 更 新 一 条 记录 。 
1. update 更 新 
使 用 update 方法 可 以 局 部 更 新 一 个 记录 或 一 个 集合 中 的 记录 ,局 部 更 新 意味 着 只 有 指 
定 的 字段 会 得 到 更 新 ,其 他 字段 不 受 影响 。 示 例 代码 如 下 : 
db. collection( 'db1'). doc('id20190901'). update({ 
data: { 
age: 30 
}, 


success: function(res) { 


}) 


2. set 更 新 
如 果 需 要 替换 更 新 一 条 记录 ,可 以 在 记录 上 使 用 set 方法 ,替换 更 新 意味 着 用 传人 的 对 
象 替 换 指 定 的 记录 。 


db. collection( 'dbl').set({ 
data: { // 插 入 的 值 
age: 60, name:" 韩 老师 ",，password:"han",， sex:"man", tel:"18888880002" 
}, 


success: function(res) { 
} 
}) 
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[ 圆 10-11 本 例 和 例 10-6 使 用 同一 个 云 数据 库 集合 dbl ,使 用 update 和 set 方法 对 数 
据 进 行 更 新 操作 ,程序 运行 结果 如 图 10.39 所 示 。 


般 老 师 --han--50--man--18888880002 
裔 老师 记录 update 之 后 

般 老 师 --han--55--man--18888880002 
摩 老师 记录 set 之 前 

了 施 老 师 --li--50--woman--18888880000 
摩 老师 记录 set 之 后 

靠 教 授 --li--60--woman--18888881111 


图 10.39 ”update 和 set 操作 
pages/update-set/update-set.wxml 的 代码 如 下 : 


< View class = "doc" bindtap = "updatel"> 韩 老师 记录 update 之 前 </view> 
<view class = "list ~ item" bindtap = "testCgi"> 
< text class = "request - text">{{updatel. name}} -- {{updatel. password}} 
-=- {{updatel.age}} -- {{updatel. sex}} -- {{updatel. tel}} </text > 
</view> 
<view class = "doc" bindtap = "update2"> 韩 老师 记录 update 之 后 </view> 
<view class = "list— item" bindtap = "testCgi"> 
< text class = "request - text">{{update2. name} } -- {{update2. password}} 
-- {{update2.age}} -- {{update2. sex}} -- {{update2. tel}} </text > 
</view> 
<view class = "doc" bindtap = "set1"> 李 老师 记录 set 之 前 </view> 
<view class = "list ~ item" bindtap= "testCgi"> 
< text class = "request - text">{{setl.name}} -- {{setl. password}} 
{{setl.age}} -- {{setl. sex}} -- {{setl. tel}} </text > 
</view> 
< view class = "doc" bindtap = "set2"> 李 老师 记录 set 之 后 </view > 
<view class = "list ~ item”bindtap = "testCgi"> 
<text class = "request - text">{{set2. name}} -- {{set2. password}} 
{{set2.age}} -- {{set2. sex}} -- {{set2. tel}} </text > 
</view> 


pages/update-set/update-set.js 的 代码 如 下 : 


Page({ 
data: {updatel:{},update2:{}，setl:{}，set2:{} }, 
updatel: function(e){ 
var that = this; 
const db = wx.cloud. database() 
db. collection( 'db1'). doc( '94blelfc5dOdf4ff05fc607934a3aba0'). get({ 
success: function (res) { 
console. log(res. data) 
that. setData( { 
updatel : res. data 
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]) 
} 
}) 
}, 
update2: function(e) { 
var that = this; 
const db = wx.cloud. database() 
db. collection( 'db1'). doc('94blelfc5d0df4ff05fc607934a3aba0') 
.update({ 
data: {age:55}, 
success: function(res) { 
console. log(res. data) 
db. collection( 'db1'). doc('94blelfc5d0df4ff05fc607934a3aba0'). get({ 
success: function(res) { 
console. log(res. data) 
that. setDatal( { 
update2: res. data 
}) 


}) 


}, 
setl: function(e) { 
var that = this; 
const db = wx.cloud. database() 
db. collection( 'dbl'). doc( '08560c9e5d0e2153061a3a3837585483').get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
setl: res. data 
}) 
} 
}) 
}, 
set2: function(e) { 
var that = this; 
const db = wx.cloud. database() 
db. collection( 'dbl'). doc( '08560c9e5d0e2153061a3a3837585483') 
.set({ 
data: { 
age: 60, name:" 李 教授 ", password:"li", sex:"woman", tel:"18888881111" 
}, 
success: function(res) { 
console. log(res. data) 
db. collection( 'db1'). doc( '08560c9e5d0e2153061a3a3837585483') 
.get({success: function (res) { 


console. log(res. data) 
that. setData( { 
set2: res. data 
}) 
} 
D) 
} 
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}) 


#$ 
}) 


【代码 讲解 】 注意 在 update 和 set 操作 之 后 不 可 以 接着 就 进行 get 操作 ,本 例 把 get 操 
作 写 在 了 update 操作 的 success 方法 中 。 


10.4.5 删除 数据 


小 程序 提供 了 remove 方法 来 删除 一 条 记录 ,示例 代码 如 下 : 


db. collection( 'db1'). doc('id20190901'). remove({ 
success: function(res) { 
console. log(res. data) 
} 
}) 
如 果 需 要 删除 多 条 记录 , 需 在 Server 端 进行 操作 ( 云 函 数 ), 并 通过 where 语句 选取 多 
条 记录 进行 删除 ,有 权限 删除 的 记录 才 会 被 删除 。 
[ 贺 10-12 本 例 和 例 10-6 使 用 同一 个 云 数据 库 集合 dbl ,使 用 小 程序 端 和 去 函数 同 时 
对 数据 进行 删除 操作 ,由 于 云 数据 库 操作 权限 问题 ,小 程序 端的 删除 操作 失败 ,而 云 函数 端的 
删除 操作 成 功 。 程 序 运行 结果 如 图 10.40 所 示 。 


| 口 ] 
T 


Console Sources Network Security AppData /| 


v | Fiher 


v {stats: {-}, errMsg: “document.remove:ok"} 转 
errMsg: “document -remove:ok~ 


视频 讲解 
oud. caLLFunction:ok", resutlt: {-}} 四 
“cloud.callFunction:ok™ 


collection.remove:ok™ 
bp stats: {removed: 1} 
: Object 


图 10.40 ”删除 云 数据 库 数 据 


pages/remove/remove.wxml 的 代码 如 下 : 


<view class = "doc" bindtap = "removel1"> 小 程序 端 删除 赵 老师 记录 </view> 
<view class = "list— item" bindtap = "testCgi"> 
< text class = "request - text">{{removel} }</text > 
</view> 
<view class = "doc" bindtap = "remove2"> 服 务 器 端 删除 赵 老师 记录 </view> 
<view class = "list — item" bindtap = "testCgi"> 
< text class = "request - text">{{remove2}}</text > 
</view> 


pages/remove/remove.js 的 代码 如 下 : 


Bage({ 
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removel :function(e){ 
var that = this 
const db = wx.cloud. database() 
db. collection( 'db1'). doc('e7bcl5af - 5983 — 4c50 - 9083 - dd465ebcfd2b') 
.remove( {success: function (res) { 
console. log(res) 
console. 1og(" 成 功 删除 " + res. stats. removed + "条 记录 ") 
} 
}) 
}, 
remove2: function (e) { 
wx. cloud. callFunction({ 


name: 'remove', // 云 函数 名 称 
data: { // 传 给 云 函 数 的 参数 
name:" 赵 老师 " 


success: function (res) { 
console. log(res) 
console. log( "成功 删除 ”+ res. result. stats. removed + "条 记录 ") 
}, 
fail: console. error 
}) 
. 
}) 


云 函 数 remove/index.js 的 代码 如 下 : 


const cloud = require( 'wx— server — sdk') 
cloud. init() 
const db = cloud. database() 
const _ = db.command 
exports. main = async (event, context) =>{ 
return await db. collection( 'dbl'). where( { 
name:event. name 
}). remove({ 
}) 
} 


【代码 讲解 】 小 程序 端 只 能 对 用 户 在 小 程序 端 插入 的 数据 进行 删除 操作 ,所 以 小 程 
序 端 对 数据 的 删除 没有 成 功 ; 云 函数 有 最 高 的 数据 库 操作 权限 ,所 以 云 函 数 端 对 数据 的 
册 除 成 功 了 。 读 者 通过 本 例 应 该 更 好 地 认识 到 小 程序 端 和 云 函数 端 对 数据 库 操作 的 
区 别 。 


10.5” 实 训 项 目 一 一 基于 云 数 据 库 的 许愿 墙 


本 实 训 项 目 以 云 开 发 的 云 数据 库 为 基础 ,制作 一 个 简易 的 许愿 墙 。 顾 
名 思 义 ,“ 云 数据 库 ” 就 是 把 本 项 目 中 的 愿望 的 数据 全 部 存储 在 云端 。 

首先 在 云 开 发 控制 台新 建 一 个 集合 wishwall, 然 后 添加 几 条 记录 ,每 一 加 
条 记录 的 3 个 字段 分 别 是 title(string)、date(string) 和 address(string), 分 


视频 讲解 
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别 表示 一 个 愿望 的 名 称 \ 日 期 和 地 点 。 云 数据 库 设 计 如 图 10.41 所 示 。 


集合 名 称 


db1 


+ 导入 工 导出 
_id: ebcf50cd-0866-41f2-9358-688... 
_id: 85af7d57-32d3-4c5a-9d2d-b3... 


"id*: “6dfb26295d10bd92002911c429a0d870" 
id: c4545b3b-c13d-4513-8613-eb... 


"openid" "on4SK5Zphzx9hyaWfEj42RKBiL20" 
_id: 3b8600b0-c496-40d0-9919-90... address":“ 广 东 省 东莞 市 虎门 镇 ” 
"date": “2019-09-08” 


title*: “虎门 看 销 烟 I 昌 址 ” 


_id: 5417ae03-a1f0-47cc-98b9-831.… 


_id: 61368d63-43c4-4c21-835f-c6b... 


图 10.41 云 数据 库 设计 


本 项 目 包括 一 个 wishwall( 愿 望 墙 ) 页 面 \add (增加 愿望 ) 页 面 和 details (愿望 详情 ) 


(1) add 页 面 ,把 页 面 title、date 和 address 插入 云 数据 库 ”wishwall” 作 为 一 条 新 的 记 
录 , 插 入 成 功 跳 回 wishwall 页 面 。add 页 面 执行 效果 如 图 10.42 所 示 。 

(2) wishwall 页 面 ,自动 加 载 云 数据 库 中 所 有 的 愿望 并 显示 出 来 , 当 点 击 某 一 条 具体 的 
愿望 时 , 则 进入 details 页 面 ,此 时 需要 传递 愿望 id 值 给 details 页 面 ; 当 点 击 “ 增 加 愿望 ”区 
域 时 , 则 进入 add 页 面 。wishwall 页 面 效 果 如 图 10.43 所 示 。 

(3) details 页 面 ,根据 wishwall 页 面 传递 过 来 的 id 查询 该 条 记录 的 title date 和 
address 值 并 显示 出 来 。details 页 面 执行 效果 如 图 10.44 所 示 。 


e000 WeChats 20.08 . ha 20.09 Ee 


< wishwal 区 
A 
前 和 2019-09-08 


增加 新 的 愿望 


图 10.42 add 页 面 图 10.43 wishwall 页 面 图 10.44 ”details 页 面 
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pages/wishwall/wishwall.wxml 的 代码 如 下 : 


< view class = "zong"> 
< view class = "yangl" wx:for = "{{wishs}}" 
id="{{item._id}}" bindtap= 'details'> 
{{item. title}} 
</view> 
< view class = "yangl" bindtap = 'add'> 
增加 愿望 
</view> 

</view> 


pages/wishwall/wishwall.js 的 代码 如 下 : 


const app = getApp() 


onLoad: function(e) { 
var that = this 
const db = wx.cloud. database() 
db. collection( 'wishwall'). get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
wishs: res. data 
}) 
} 
}) 
}, 
details:function(e){ 
console. log(e. target. id) // 点 击 了 那 条 愿望 
wx. navigateTo( { 
url: "../details/details?id= " +e. target. id 
}) 
}, 
add: function(e){ 
wx. navigateTo( { 
url: '../add/add', 
nD 
} 
}) 


pages/wishwall/wishwall.wxss 的 代码 如 下 : 


page { 

display: flex; flex- direction: column; 

justify ~ content: flex- start; background— color: #005F8C; 
} 
.zong{ 

display: flex; flex— direction:row; 
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flex — wrap: wrap; padding: 20rpx; 
align - items: center; justify— content: space— around; 
} 
“yang1{ 
padding: 30rpx; background — color: # ffffff; 
margin ~ top: 20rpx; border — radius:10rpx; 
} 
“yang2{ 
padding: 30rpx; background - color: 井 flb0e6; 
margin ~ top: 20rpx; border - radius:10rpx; width: 100rpx; 
} 


【代码 讲解 】 wishwall.js 的 onLoad() 函 数 自动 执行 对 云 数 据 库 的 查询 操作 ,获取 云 数 
据 库 中 所 有 的 愿望 数据 ,赋值 给 wishs, 并 通过 数据 绑 定 的 方式 在 wishwall.wxml 中 进行 这 
染 显示 。 

pages/add/add.wxml 的 代码 如 下 : 


<view class = 'title'> 
< view > 请 输入 您 的 愿望 </view> 
<view>< input class = 'in' auto ~ focus bindinput = "title"></input ></view > 
</view> 
<view class = 'title'> 
< view> 时 间 </view> 
< picker mode = "date" value = '{{date}}' start = "2019 -08 一 01” 
end = "2020 - 08 - 08" bindchange = 'date'> 
< view class = 'in'>{ {date}}</view> 
</picker></view> 
< view class = 'title'> 
< view> 地 点 </view> 
< picker mode = "region" bindchange = "bindRegionChange" 
value = "{{region}}”custom - item = "{{customItem}}"> 
< view class = "in"> 
{{region[0]}}, {{region[1]}}, {{region[2]}} 
</view> 
</picker ></view > 
<view class = "title"></view> 
< button type = "primary”bindtap = "add" > 插入 愿望 </button> 


pages/add/add.js 的 代码 如 下 : 


Page({ 
data: { 
title:'" 
region: [' 广 东 省 '，' 广 州 市 '，' 海 珠 区 ']， 
date: "2019 - 08 - 08",address:" 广 东 省 广州 市 海珠 区 " 
}, 
title:function(e){ 
this. setData({ 
title: e. detail. value 
}) 
}, 
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date: function(e) { 
console. log(e) 
this. setData( { 
date:e. detail. value 
}) 
}, 
bindRegionChange: function(e) { 
console. log( ' 携 带 值 为 '，e. detail.value[0] + 
e.detail.value[1] + e.detail.value[2]) 
this. setData( { 
region: e. detail. value, 
address: e. detail. value[0] + e.detail.value[1] + e.detail.value[2] 
}) 
}, 
add: function(e){ 
var that = this; 
const db = wx.cloud. database() 


db. collection( 'wishwall').add({ 
data: { 
title:that. data. title, 
date: that. data. date, 
address: that. data. address 
}, 
success: function(res) { 
console. log(res) 
. 
wx. navigateTo( { 
url: '../wishwall/wishwall’, 
}) 
} 
}) 


pages/add/add.wxss 的 代码 如 下 : 


.in{ 
border: 1px solid # ffffff; 
} 
.title{ 
margin 一 top: 20rpx; margin - bottom: 20rpx; color: # ffffff; 
} 
page{ 
background - color: #005F8C; 
} 


【代码 讲解 】 add.js 获取 add.wxml 由 用 户 填 入 表单 的 数据 ,并 执行 对 云 数 据 库 的 插入 
操作 ,插入 成 功 之 后 再 跳 转 回 wishwall.wxml 页 面 。 
pages/ details/details.wxml 的 代码 如 下 : 
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< view class = "title">{{iten. title}}</view> 
< view class = 'date'>{{item. date}}</view> 
< view class = "address">{{item.address} }</view> 


pages/details/details.js 的 代码 如 下 : 


Page({ 
data: { 
item: { 
title: "白云 山 看 山 ",date: "2019 - 08 - 08",address: "广东 省 广州 市 白云 区 "} 
}, 
onLoad: function(options) { 
console. log(" 传 过 来 的 数据 是 ") 
console. log(options. id) 
var id = options. id 
var that = this; 
const db = wx.cloud. database() 
db. collection( 'wishwall'). where({ 
_id:id 
}).get({ 
success: function (res) { 
console. log(res. data) 
that. setData({ 
item: res. data[0] 


}) 


pages/details/details.wxss 的 代码 如 下 : 


.title{ 
margin ~ top: 100rpx;font - size: 2.5em; color: #ffffff; text -align:center; 


pagef 
background - color: #005F8C; 


.date{ 
margin 一 top: 50rpx; font ~ size: 1.5em; color: #ffffff; text— align:center; 


.address{ 
margin — top: 30rpx; font - size: lem; color: #ffffff; text— align:center; 


【代码 讲解 】 details.js 的 onLoad( 〇 函数 根 据 wishwall.js 传递 过 来 的 id 值 ,查询 云 数 
据 库 中 被 用 户 点 击 的 那 条 愿望 信息 ,获取 的 记录 值 赋值 给 item, 并 通过 数据 绑 定 的 方式 在 
detail.wxml 中 进行 泻 染 显示 。 
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通过 前 面 十 章 的 学 习 , 相 信 读 者 已 经 具备 了 开发 完整 小 程序 项 目的 能 力 。 本 章 将 以 电 
商 类 小 程序 项 目 为 例 , 系 统 地 完成 一 个 项 目的 开发 全 过 程 。 通 过 本 章 的 学 习 , 读 者 将 提升 商 
业 项 目的 设计 与 实 操 能 力 。 

本 章 主要 目标 

。 综合 应 用 所 学 知识 创建 完整 的 电 商 小 程序 项 目 ; 

。 熟练 掌握 与 实现 页 面 中 的 交互 ， 

。， 了 解 项 目 开发 中 的 流程 步 又 。 


11.1 需求 分 析 


本 项 目 一 共 需 要 6 个 页 面 , 即 数码 商城 首页 .商品 分 类 页 .商品 详情 页 .购物 车 页 面 、 支 
付 页 和 个 人 主页 。 

(1) 数码 商城 首页 : 数码 商城 首页 应 包含 顶部 的 轮 播 图 、 中 间 商 品 列表 部 分 和 底部 
tabBar 菜单 ,其 中 , 轮 播 图 可 以 使 用 swiper 实现 ,中 间 商 品 列表 部 分 利用 wx:for 来 演 染 , 底 
部 tabBar 菜单 在 app.json 文件 中 配置 。 当 用 户 点 击 某 款 商品 时 ,可 以 跳 转 到 该 款 商 品 的 详 
情 页 中 。 底 部 tabBar 菜单 包含 “首页 “分 类 ”“ 购 物 车 “我 的 ”4 个 切换 菜单 。 

(2) 商品 分 类 页 : 当 用 户 点 击 左边 的 分 类 区 域 后 ,在 右 侧 按 分 类 显示 对 应 的 商品 。 当 
用 户 点 击 某 款 商 品 时 ,可 以 跳 转 到 该 款 商品 的 详情 页 中 。 

(3) 商品 详情 页 : 通过 商城 首页 和 分 类 页 的 点 击 事件 跳 转 而 来 ,根据 商城 首页 和 分 类 
页 传递 过 来 的 {{index} 字 段 来 调用 正确 的 商品 信息 ,用 户 在 此 页 面 可 将 商品 添加 进 购 
物 车 。 

(4) 购物 车 页 面 : 用 户 可 以 进行 商品 数量 的 修改 .删除 某 件 商品 清空 购物 车 等 操作 ， 
点 击 “ 结 算 ” 按 钮 进入 支付 页 面 。 
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(5) 支付 页 : 显示 购买 的 商品 数量 \ 设 置 配 送 时 间 、 备 注 以 及 付款 总 额 。 
(6) 个 人 主页 : 查看 个 人 信息 。 


.2 页 面 设 计 与 实现 


11 


本 节 完 成 商城 首页 的 设计 、 商 品 分 类 页 的 设计 以 及 商品 详情 页 的 设计 。 
.2.1 全 局 文件 的 设计 与 实现 


创建 一 个 名 为 digitalMall 的 小 程序 项 目 , 在 app.json 文件 中 注册 项 目 需 要 的 页 面 、 底 


部 tabBar 菜单 以 及 项 目标 题 的 配置 。 本 项 目的 商品 数据 均 放 在 本 地 app.js 文件 中 ,有 兴趣 
的 读者 可 以 按 第 6 童 的 知识 点 把 商品 数据 存放 在 服务 器 或 者 按 第 10 童 的 知识 点 把 商品 数 
据 存放 在 云 数据 库 中 。 
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app.json 文件 代码 如 下 : 
{ 


"pages": [ 
"pages/goods - index/goods - index", 
"pages/goods - detail/goods - detail", 
"pages/sort/sort", 
"pages/cart/cart", 
"pages/pay/pay", 
"pages/my/my" 
], 
"window": { 
"navigationBarBackgroundColor" : " # B3B3B3" 
}, 
"tabBar": { 
"color": "#4D4D4D", 
"selectedColor": "#FF0000", 
"borderStyle" : "black", 
"list": [ 
i 
"selectedIconPath" : "icon/index0. png", 
"iconPath" : "icon/index. png", 
"pagePath" : "pages/goods - index/goods - index", 
"text": "首页 " 
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"selectedIconPath" : "icon/sort0. png", 


"iconPath" : "icon/sort. png", 
"pagePath" : "pages/sort/sort", 
"text": "分 类 " 

}, 

{ 


"selectedIconPath" : "icon/cart0. png", 
"iconPath" : "icon/cart. png", 
"pagePath" : "pages/cart/cart", 

"text" : "购物 车 " 


"selectedIconPath" : "icon/me0. png", 


"iconPath" : "icon/me. png", 
"pagePath" : "pages/my/my", 
"text": "我 的 " 


sitemap. json" 


app.js 文件 代码 如 下 : 


App({ 


globalData: { 
data: [{ 


id: 0, 
sort: 1, 
title: "(HUAWEI)P30", 
titleTwo: " 超 感 光 徕卡 三 摄 | 逆光 智 
price: "4288. 00", 
image: "https://res. vmallres. com/pimages//product/6901443293513 
/800_800_1555464685019mp. png", 
imageone: "//img10.360buyimg. com/n7/jfs/t1/31698/11/11865/218814 
/5cb68870Ebf26elbd/dbe080c29fb0aeff. jpg", 
imagetwo: "//img14.360buyimg. com/n7/jfs/t1/11352/31/13456/324178 
/5c98c88dE9419c2ca/4be2efcald9e2b38. jpg", 
imagethree: "//img12.360buyimg. com/n7/jfs/t1/30693/17/7599/332089 
/5c98cclfE43eafa3c/3b3515c7537efeaf. jpg", 
imgdetail: [{ 

image: "//img20.360buyimg. com/vc/jfs/t1/37127/23/887/799049 
/5cadd35dE9ec3cc24/766b05c2232b3b23. jpg", 

mode: "widthFix" 
}，],， 
imgdeparameter: [{ 

image: "//img20.360buyimg. com/vc/jfs/t1/59649/26/1793/4847556 
/5d0208b5E39a5ab59/300c87f3e3915620. jpg"， 

mode: "widthFix" 


}: 1 


拍 "， 


id: 1, 
sort: 1, 

title: "(HUAWEI) 荣 炮 V20"， 

titleTwo:" 魅 眼 视屏 4800 万 深 感 相 机 "， 
price: "3699.00", 
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image: "//img12.360buyimg. com/n7/jfs/t25954/134/1930444050/488286 
/31587d0d/5bbf1fc9N3ced3749. jpg", 
imageone: "//img14.360buyimg. com/n7/jfs/t25420/83/1918969044/436308 
/64a55b49/5bbflfbfN96f4ba7e. jpg", 
imagetwo: "//img14.360buyimg. com/n7/jfs/t26017/221/2094289784 
/437463/b9ee4f1f/5bc47489Nebd5e8b0. jpg"， 
imagethree: "//img10.360buyimg. com/n7/jfs/t27568/359/1014140699 
/436308/64a55b49/5bbf1f3cN3363b2b2. jpg", 
imgdetail: [{ 
image: "//img20.360buyimg. com/vc/jfs/t1/2989/1/11532/3806781 
/5bcfdOceE9cb3575c/c7a5bl2aada8552b. jpg", 
mode: "widthFix" 
}，],， 
imgdeparameter: [{ 
image: "//img20.360buyimg. com/vc/jfs/t27433/167/1405654888 
/234469/b3aadbf1/5bc85d45N25be7ed6. jpg", 
mode: "widthFix" 
]，{ 
image: "//img20.360buyimg. com/vc/jfs/t26110/279/1327305885 
/330746/ae320b81/5bc59e47Ne94d3efe. jpg", 
mode: "widthFix" 


Ef 
sort: 2, 
title: "IE80S 和 人 耳 式 监听 耳机 "， 
titleTwo: " 森 海 塞 尔 HiFi 音乐 耳机 "， 
price: "2399.00", 
image: "https://images. wincheers. net/UpLoad/Web/ProductImg 
/2018 - 06 - 15/NEW_XM/IE80S. jpg", 
imageone: "//imgl1.360buyimg. com/n7/jfs/t1/51871/24/2765/90692 
/5d09ea26Ecal2e23a/3183d39bae509977. jpg"， 
imagetwo: "//img13.360buyimg. com/n7/jfs/t1/37032/4/10505/56477 
/5d09df52E32104653/27cfa82d534591dd. jpg"， 
imagethree: "//img13.360buyimg. com/n7/jfs/t1/37032/4/10505/56477 
/5d09df52E32104653/27cfa82d534591dd. jpg"， 
imgdetail: [{ 

image: "//img13.360buyimg. com/cms/jfs/t1/44079/31/8065/242506 
/5dla281dEb085f2d0/7d4c6766d6741784. jpg"， 

mode: "widthFix" 

} 


image: "//img10.360buyimg. com/cms/jfs/t1/53747/12/4070/157955 
/5dlb2820Eal6a5fac/36d136d2104ff491. jpg", 

mode: "widthFix" 
}, 


image: "//img30.360buyimg. com/jgsq ~ productsoa/jfs/t1/28069/8 
/4582/207938/5c32c4blEc5c9026c/a8dc4b5e9a93c3be. jpg"， 
mode: "widthFix" 
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} 
]， 
imgdeparameter: [{ 
image: "//img13.360buyimg. com/cms/jfs/t1/70502/7/3355/209359 
/5dla29a0E438ae9e4/88e090a64f796dcd. jpg"， 
mode: "widthFix" 
}, 
{ 
image: "//imgl1.360buyimg. com/cms/jfs/t1/62580/4/3467/246593 
/5dla2al2E0196f6eb/fcd04b7d68691caf. jpg", 
mode: "widthFix" 
}, 


2 
sort: 2, 
title: "IE60 人 耳 式 HiFi 耳机 "， 
titleTwo:" 森 海 塞 尔 人 耳 式 HIFI 耳机 "， 
price: "799.00", 
image: "https://images.wincheers. net/UpLoad/Web/ProductImg 
/2017 — 08 — 14/NEW_XM/IE— 60— 4.png", 
imageone: "//img12.360buyimg. com/n5/jfs/t11584/3/384240986/69087 
/fe5d3b68/59eebd52N9d786155. jpg", 
imagetwo: "//img10.360buyimg. com/n5/jfs/t2080/174/1543078580/76751 
/ceebd204/5667e903Nc1688332. jpg", 
imagethree: "//img12.360buyimg. com/n7/jfs/t9853/237/2116508249 
/69087/fe5d3b68/59eebd40N23b9d715. jpg", 
imgdetail: [{ 
image: "//img30.360buyimg. com/jgsq — productsoa/jfs/t1/56674/3 
/6339/105009/5d414287E74c8e487/1401f285551831db. jpg", 
mode: "widthFix" 
},] 
} 
]， 
imgdeparameter: [{ 
image: "//img10.360buyimg. com/imgzone/jfs/t3136/220/2277407509 
/120182/79fdaa99/57df5245N2c4750c3. jpg"， 
mode: "widthFix" 
}，] 
i 
}) 


11.2.2 商城 首页 的 设计 与 实现 

首先 设计 商城 首页 的 布局 ,然后 从 app.js 中 获取 数据 ,通过 wx:for 列表 泻 染 在 页 面 中 
显示 每 款 商 品 的 信息 , 当 用 户 点 击 某 一 商品 时 ,页 面 跳 转 到 该 款 商 品 的 详情 页 。 商 城 首页 的 
运行 效果 如 图 11.1 所 示 。 
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图 11.1 商城 首页 效果 图 
pages/goods-index/goods-index.wxml 文件 代码 如 下 : 
<! -- 轮 播 图 --> 


< swiper indicator - dots autoplay interval = "3000"> 


< swiper — item> 


< image src = '/images/banl. jpg'></image > 
</swiper - item> 
< swiper — item> 
< image src = '/images/ban2. jpg'></image > 
</swiper — item> 
< swiper — item> 
< image src = '/images/ban3. jpg'></image > 
</swiper 一 item > 
</swiper > 
<! 一 -商品 展示 部 分 -一 > 
<view class = "demo — box"> 
< block wx:for = "{{fmain key}}" wx:for— item= "item"> 
<view class = "goods - box" bindtap = "btntodetail” data- id= "{{item. id}}"> 
< image class = "goods — pic" src="{{itenm. image}}"></image> 
<view class = "goods - title">{{item. title}}</view > 
<view class = "goods - titleTwo">{ {item. titleTwo} }</view > 
<view class = "row"> 


< View class = "goods — price"> ¥ {{item. price}}</view> 
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< text class = "goods - btn"> 看 相似 </text> 


</view> 


</view> 
</block > 
</view> 


pages/goods-index/goods-index.js 文件 代码 如 下 : 


const App = getApp(); 
Page({ 
// 获 取 数 据 
onLoad: function(options) { 
this. setData( { 
main key: App. globalData. data 
}) 
}, 
// 点 击 商品 列表 跳 转 商 品 详情 页 
btntodetail: function(e) { 
var listid = e.currentTarget. dataset. id 
console. log(" 你 点 击 了 第 ”+ (listid + 1) +“" 个 商品 ") 
wx. navigateTo( { 
url: '../../pages/goods - detail/goods - detail?listid=' + listid 
}) 
| 
}) 


pages/goods-index/goods-index.wxss 文件 代码 如 下 : 
/* 轮 播 图 样式 */ 


swiper { 
width: 100 %; height: 380rpx; 


/* 轮 播 图 中 图 片 样式 * / 
swiper image { 
width: 100 %; height: 380rpx; 


/* 商品 展示 外 部 样式 */ 
.demo — box { 
display: flex; flex- direction: row; flex— wrap: wrap; padding: 30rpx; 


.goods — box { 
width: 49 %; margin - bottom: 20rpx; 


/* 商品 内 容 样式 */ 
.goods— pic { 
width: 220rpx; height: 250rpx; 
margin: 0 auto; display: block; 
} 
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.row { 


display: flex; flex- direction: row; justify- content: space— around; 
} 
/* 看 相似 样式 */ 
.goods— btn { 
border: 1px solid # e3e3e3; border - radius: 20rpx; 
margin ~ top: 20rpx; width: 100rpx; 
height: 40rpx; line - height: 40rpx; 
font - size: 24rpx; color: #aaa; 


letter — spacing: 2rpx; text 一 align: center; 


} 
/* 商品 标题 样式 * / 
.goods — title { 
font - size: 30rpx; font ~ weight: 600; text — align: center; 
} 
.goods — titleTwo { 
font - size: 24rpx; margin - top: 10rpx; text ~ align: center; 
} 
/x* 商品 价格 样式 * / 
.goods — price { 
font - size: 30rpx; margin - top: 20rpx; color: # ee3b3b; 


} 

【代码 讲解 】 goods-index.js 文件 的 onLoad() 函数 通过 语句 main_ key: App. 
globalData.data 获取 app.js 文件 中 的 商品 数据 ,再 使 用 wx:for="{{main_key})" 列 表演 染 
把 所 有 的 商品 在 页 面 中 显示 出 来 。 点 击 事件 btntodetail() 实 现 首 页 到 详情 页 的 跳 转 , 在 
goods-index.js 文件 中 自 定义 该 函数 如 下 : 


btntodetail: function(e) { 
var listid = e.currentTarget. dataset. jd 
console. log(" 你 点 击 了 第 ”+ 1listid + "个 商品 " 
wx.navigateTo({ 
url: '../../pages/goods - detail/goods - detail?listid=' + listid 
}) 
} 
}) 
由 于 在 goods-index.wxml 文件 中 设置 了 自 定义 数据 data-id 二 "{{item.id))", goods- 
index.js 通过 语句 var listid 二 e.currentTarget.dataset.id 获取 用 户 具体 点 击 的 那 件 商 品 在 
商品 数组 中 的 下 标 , 商 品 详情 页 通过 listid 准确 显示 被 点 击 的 商品 的 信息 。 


11.2.3 商品 分 类 页 的 设计 与 实现 

商城 首页 没有 对 商品 进行 分 类 处 理 , 而 是 通过 wxsfor 对 商品 数组 进行 全 部 循环 党 染 。 
商品 分 类 页 实现 商品 的 分 类 功能 , 当 用 户 点 击 * 手 机 ”分 类 ,页 面 的 右 侧 只 显示 所 有 的 * 手 机” 
商品 。 图 11.2 是 分 类 页 的 * 手 机 产品 ”页面 ; 图 11.3 是 分 类 页 的 “时 尚 耳机 ”页 面 。 
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图 11.2 分 类 页 之 “手机 产品 ” 


pages/sort/sort.wxml 文件 代码 如 下 : 


二 一 疮 困 绕 一 > 
<view class = "hr"></view> 
<! -- 搜索 框 --> 


< View class = "header"> 


< input placeholder = ' 请 输入 商品 名 称 '></input > 


</view> 
<view class = "hr"></view> 
<view class = "content"> 

<! 一 左 侧 内 容 -一 > 


<view class = "left"> 


< scroll - view scroll -~ y> 


图 11.3 分 类 页 之 “时 尚 耳机 ” 


<view id= "1" bindtap = "switchTab"> 手 机 产品 </view> 
<view id= "2" bindtap = "switchTab"> 时 尚 耳 机 </view> 
<view id= "3" bindtap = "switchTab"> mini 相机 </view> 


<view id 


"4" bindtap = "switchTab"> 电 脑 硬 盘 </view> 


<view id= "5" bindtap = "switchTab"> 鼠 标 键盘 </view> 
<view id= "6" bindtap = "switchTab"> 平 板 电脑 </view> 


</scroll - view> 
</view> 
<! 一 右 侧 内 容 -一 > 


< view class = "right"> 


<block wx:for = "{{main key}}" wx:for— item= "item" class= "left"> 
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< block wx:if = "{{ item. sort == sort}}"> 
< view bindtap = "btntodetail" data— id= "{f{fitem. id}}"> 
< image class = "right - image" src = "{{item. image}}"></image> 
<view class = "title— box"> 
< view class = "goods — title">{{item. title} }</view> 
< text class = "goods — titleTwo">{ {item. titleTwo} }</text > 
<view class = "goods — price"> ¥ {{item. price} }</view> 
</view> 
</view> 
</block> 
</block> 
</view> 
</view> 


pages/sort/sort.js 文件 代码 如 下 : 


const App = getApp(); 
Page({ 
// 数 据 初始 化 
data: { 
flag: 0, 
list: [" 手 机 产品 "，" 时 尚 耳机 "，"mini 相机 "," 电 脑 硬盘 "," 和 鼠标 键盘 "， "平板 电 脑 "]， 
sort: 1 
$e 
// 获 得 数据 
onLoad: function(options) { 
this. setData( { 
main key: App. globalData. data 
}) 
}, 
// 点 击 商品 列表 跳 转 商 品 详情 页 
btntodetail: function(e) { 
var listid = e.currentTarget. dataset. id 
console. log(" 你 点 击 了 第 ”+ (listid + 1) + "个 商品 ") 
wx. navigateTo( { 
url: '../../pages/goods — detail/goods - detail?listid=' + listid 
}) 
}, 
//Tab 栏 切换 
SwitchTab: function(e) { 
console. log(e) 
this. setData( { 
sort: e.currentTarget. id 
}) 
}, 
}) 


pages/sort/sort.wxss 文件 代码 如 下 : 
/* 外 部 样式 */ 


.content { 
display: flex; flex- direction: row; 
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} 
/* 分 隔 线 样式 */ 
.hr { 
border: 1px solid #ccc; opacity: 0.2; 
} 
/* 输 入 框 样式 x/ 
input { 


margin: 15rpx 30rpx; border: 1px solid #¢ccc; 
border - radius: 50rpx; text ~ align: center; 
font - size: 32rpx; 
} 
/* 左边 样式 */ 
.left { 
width: 25 %; font— size: 30rpx; 
} 
/* 左边 内 容 样式 */ 
.left view { 
text - align: center; height: 50px; line~ height: 50px; 
} 
scroll — view { 
height: 90 %; 
} 
.left view { 
border - bottom: 1px solid # f0ffff; background — color: 井 eee9e9; 


/* 右边 内 容 样式 * / 
.right { 
width: 75 %; padding: 10rpx; 


/* 商品 图 片 样式 * / 
.right ~ image { 
width: 200rpx; height: 250rpx; margin— left: 80rpx; 


/* 商品 标题 样式 * / 
.title— box { 
margin— left: 20rpx; 


.goods -title { 
font - size: 30rpx; font - weight: bold; 


.goods — titleTwo { 
font — size: 26rpx; 


/* 商品 价格 样式 */ 
.goods — price { 
color: #ee3b3b; font - size: 26rpx; 


【代码 讲解 】 sort.wxml 实现 商品 的 分 类 功能 ,页 面 的 左 侧 是 一 个 < scroll-view > 组 件 


用 来 显示 所 有 的 分 类 , 右 侧 显示 具体 分 类 下 的 所 有 商品 , 左 侧 和 右 侧 之 间 的 交互 是 本 文件 的 
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关键 点 。< scroll-view > 组 件 的 每 一 个 分 类 都 对 应 一 个 id,sort.js 的 select 函数 接收 该 id 赋 
值 给 页 面 变 量 sort。sort.wxml 在 使 用 wx:for 循环 浑 染 所 有 商品 的 时 候 ,< block wx:if 二 = 
"ffitem.sort 王 一 sort}}"> 实 现 只 这 染 符合 该 分 类 的 商品 ,从 而 实现 了 左 侧 与 右 侧 的 交互 
行为 。 


11.2.4 商品 详情 页 的 设计 与 实现 


商品 详情 页 根据 商城 首页 和 分 类 页 传递 过 来 的 listid 变量 来 定位 具体 的 商品 , data: 
App.globalData.data[id] 中 的 id 即 是 listid, 该 语句 从 商品 数组 中 根据 id 值 取出 正确 的 那 件 
商品 的 信息 。 商 品 详情 页 的 运行 效果 如 图 11.4 一 图 11.6 所 示 , 其 中 ,图 11.4 是 “商品 详情 ” 
内 容 , 图 11.5 是 “产品 参数 ”内容 ,图 11.6 是 “加 入 购物 车 ”的 状态 。 
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图 11.4 商品 详情 


pages/goods-detail/goods-detail.wxml 文件 代码 如 下 : 


<! 一 商品 展示 -> 
< swiper indicator - dots autoplay interval = "3000"> 
< swiper — item> 


< image src = "{{data. imageone}}" /> 


</swiper - item> 
< swiper — item> 
< image src = "{{data. imagetwo}}" /> 
</swiper — item> 
< swiper 一 item> 
< image src = "{{data. imagethree}}" /> 
</swiper — item> 
</swiper > 


<! 一 商品 标题 和 价格 -一 > 
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< view class = 'box— demo'> 
<text class = 'title'>{{data. title}} {{data. titleTwo} }</text > 
<text class = 'price'>¥ {{data. price}}</text > 


</view> 
<! 一 商品 详情 展示 --> 
<view> 

<view class = "tab {{HomeIndex == 0 ?'active':''}}" bindtap = "switchTab" data- index = "0"> 
商品 详情 </view> 

<view class= "tab {{HomeIndex == 1 ?'active':''}}" bindtap = "switchTab" data— index = "1"> 
产品 参数 

</view> 

<view> 

<view wx: if =" {{HomeIndex == 0}}" wx: for ="{{data. imgdetail }}" wx: for - item = 


"imgdetail"> 
< image src = " {{ imgdetail. image}}" mode = " {{imgdetail. mode}}" class = "fix - box"> 
</image> 
</view> 


<view wx:if ="{{HomeIndex == 1}}" wx:for = "{{data. imgdeparameter}}" wx:for— 让 en = 
"imgdeparameter"> 
< image src = '{{imgdeparameter. image}}' mode = "{{ imgdeparameter. mode}}" class = "fix— 
box"></image > 
</view> 
</view> 
</view> 
<! 一 -底部 加 入 购物 车 --> 
< view class = "bottom"> 
<view class = "left"> 
< image src = "/images/jindian. png" style = ' height: 80rpx; width: 90rpx ' bindtap = 
"backtoindex"></image > 
< image bindtap = "tocart" src = "/images/cart. png" style = "height:90rpx; width: 90rpx"> 
</image> 
< text class = "carts - icon - num" wx:if ="{{hasCarts}}">{ {num} }</text > 
</view> 
< View class = "right"> 
< text class = "textone" bindtap = "addcart" data— id = "{{data. id}}" data— title= "{{data. 
title}}" data- price= "{{data. price}}" data- image = "{{data. image}}"> 加 入 购物 车 </text> 
</view> 
<view class= "right"> 
< text class = "texttwo"> 联 系 客服 </text > 
</view> 
</view> 


pages/goods-detail/goods-detail.js 文件 代码 如 下 : 


const App = getApp(); 
Page({ 
data: { // 数 据 初始 化 
HomeIndex: 0, 
hasCarts: false, 
num: 0 


}, 
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// 页 面 加 载 时 获得 app. js 中 的 数据 
onLoad: function(option) { 


Va 
th: 


r id = option. listid 
is. setData( { 


data: App. globalData. data[ id] 


}) 
}, 


//Tab 栏 切 换 
switchTab: function(e) { 


Va 
th: 


r index = parseInt(e.currentTarget. dataset. index) 
is. setData( { 


HomeIndex: index 


}) 
}, 


// 返 回 商品 首页 


backtoindex: function() { 


Wx. 


. SwitchTab({ 


url: "../../pages/goods - index/goods - index" 


虐 
}, 


// 增 加 图 标 中 的 数量 


addcart: function(e) { 


let num = this. data. num; 


num++; 

this. setData( { 
num: num, 
hasCarts: true 


}) 


// 将 商品 信息 放 和 人 缓存 中 


var cartItems = wx. getStorageSync("cartItems") || [] 


var exist = cartItems. find(function(el) { 


return el. id == e.target. dataset. id 


}) 


// 当 购物 车 里 已 经 存在 该 商品 数量 时 加 1 
if (exist) { 

exist. value = parseInt(exist.value) + 1 
} else{ 

cartItems. push({ 


id: e.target. dataset. id, 
title: e.target. dataset. title, 
image: e. target. dataset. image, 
price: e. target. dataset. price, 
value: 1, 
selected: true 

}) 

} 


// 弹 窗 显 示 
wx. showToast({ 


title: "加 入 购物 车 "， 


duration: 1000 
}) 


// 更 新 缓存 数据 
wx. SetStorageSync("cartItems"，cartItems) 
}, 
// 跳 转 到 购物 车 页 面 
tocart: function() { 
wx. switchTab( { 
url: "../../pages/cart/cart" 
}) 
} 
}) 


pages/goods-detail/goods-detail.wxss 文件 代码 如 下 : 


/* 轮 播 图 样式 */ 
swiper { 
width: 100 %; height: 720rpx; 
} 
/* 轮 播 图 内 部 图 片 样式 * / 
swiper image { 
display: block; margin: 60rpx auto; 
width: 560rpx; height: 530rpx; 
} 
/* 商品 标题 样式 * / 
.title { 
font — size: 34rpx; 
} 
/* 商品 价格 样式 * / 
.Price { 
color: #f00; font - size: 32rpx; 
padding ~ top: 20rpx; padding - left: 15rpx; 
} 
/* 商品 展示 外 部 样式 * / 
.box — demo { 
display: flex; flex- direction: column; 
width: 100 %; height: 100rpx; 
} 
/* 切换 内 容 样式 */ 
.tab { 
display: inline - block; color: black; 
font - size: 30rpx; width: 50 %; 
height: 100rpx; line ~ height: 100rpx; mtext ~- align: center; 
} 
/* 切换 后 样式 * / 
.active { 
color: black; border - bottom: 5rpx solid black; 
} 
/* 商品 详情 下 方 内 容 样式 x / 
.fix— box { 
width: 100 %; height: auto; display: block; 
# 
/* 底部 样式 */ 
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.bottom { 
width: 100 %; height: 90rpx; position: fixed; 
bottom: Orpx; background: #fff; 
} 
/* 底 部 左边 样式 * / 
.left { 
width: 25 %; margin— left: 20rpx; float: left; 
} 
/* 底部 右边 样式 * / 
.right { 
width: 35 %; height: 100%; float: right; 
} 
/* 底部 文字 样式 * / 
. textone { 
display: block; color: white; 
line - height: 100rpx; text - align: center; 
font - size: 26rpx; background: #f£00; 
} 
.texttwo { 
display: block; color: white; 
line— height: 100rpx; text 一 align: center; 
font - size: 26rpx; background: green; 
} 
/* 加 入 购物 车 图 标 样式 * / 
.Carts— icon— nunm { 
position: absolute; top: 5rpx; 
left: 160rpx; width: 40rpx; 
height: 40rpx; line - height: 40rpx; 
border — radius: 50%; background: 并 f00; 
color: #fff; font— size: 24rpx; text - align: center; 


} 

【代码 讲解 】 goods-detail.js 文件 中 的 onload() 函数 通过 设置 var id 二 option.listid 来 
获取 跳 转 过 来 的 页 面 中 用 户 浏 览 某 款 商 品 的 id, 并 且 通 过 设置 data: App. globalData 
.data[idj 来 获取 app.js 文件 中 的 商品 数据 。goods-detail.wxml 文件 通过 数据 绑 定 的 方式 演 
染 data 的 数据 即 是 商品 的 详情 信息 。 

goods-detail.js 的 点 击 事件 switchTab () 用 于 实现 页 面 内 “商品 详情 "和 “产品 参数 ”的 内 容 
切换 ; 点 击 事件 goPay() 用 于 实现 页 面 跳 转 到 支付 页 面 pay; 点 击 事件 addcart() 用 于 实现 购物 
车 的 更 新 ,并 把 更 新 之 后 的 购物 车 数据 cartItems 通过 语句 wx.setStorageSync("cartItems"， 
cartItems) 设 置 到 数据 缓存 区 供 支 付 页 面 和 购物 车 页 面 使 用 。 


11.3 ”购物 车 功能 的 设计 与 实现 


购物 车 页 面 将 数据 缓存 区 的 购物 车 数据 cartItems 显示 出 来 ,并 提供 一 些 与 购物 车 相 
关 的 操作 功能 。 购 物 车 页 面 的 运行 效果 如 图 11.7 一 图 11.9 所 示 , 其 中 .图 11.7 是 全 选 购物 
车 中 的 商品 ,图 11.8 是 反选 购物 车 中 的 商品 ,图 11.9 是 清空 购物 车 。 
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图 11.7 ”全 选 购物 车 


pages/cart/cart.wxml 文件 代码 
<! 一 - 左 侧 图 标 --> 


<view wx:for = "{{cartItems}}"> 


<view data— id= "{{fitem. id}}" class = "icon- box" data- index = "{{index}}"> 


<view class = 'icon'> 


< icon wx: if 
size= "22" bindtap = "selectIc 


图 11.8 反选 购物 车 


如 下 : 


{{item. selected}}" type = "success" color =" 井 ff0000" 
"{{index}}" /> 


on" data — index 


图 11.9 清空 购物 车 


< icon wx:else type = "circle" bindtap = "selectIcon" size= "22" data- index = "{{index}}" /> 


</view > 
<view> 
<! 一 商品 信息 -一 > 


< view class= "left - image"> 


< image class = "addcart — image" src = "{{ item. image}}"></image> 


</view> 
< View class= "left- detail"> 


< text class 


< text class = 


"cart 一 title">{{ item.title}}</text > 
"cart - price"> ¥ {{item. price}}</text> 


< text bindtap = "reduce" class = "input" data— index= "{{index}}">— </text > 


< text class = 


"input cart - amount">{ {item. value} }</text > 


< text bindtap = "add" class = "input" data— index = "{{index}}">+</text> 


</view> 
<! 一 删除 图 标 -一 > 


<view class= "right"> 


< image src = "/images/delete. png" bindtap = "delete" 
data — index = "{{index}}"></image> 


</view> 
</view> 
</view> 
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</view> 
~ 本部 -一 > 


< view class = "cart 一 total"> 


< text class = "total - text"> 合 计 : </text > 
< text class = "total ~ color">¥ {{total}} 元 </text > 


</view> 


<view class = "total - bottom"> 


< icon wx:if ="{{checkAll}}" class = "cart ~ icon" type= "success" 
color = "#ff0000" size= "22" bindtap= "select" data— index = "{{index}}" /> 
< icon wx:else type = "circle" class= "cart ~ icon" size= "22" bindtap= "select" 
data— index = "{{index}}" /> 
<text class = "checked - all"> 全 选 </text > 
<view class = "clear - cart"> 
< text class = "pay" bindtap = "goPay"> 结 算 </text > 
</view> 


< view class = "clear - cart"> 
< text class = "clear - text" bindtap = "clearcart" data- id = "{f{fitem. id}}"> 清 空 购物 
车 </text> 
</view> 


</view> 


pages/cart/cart.js 文件 代码 如 下 : 


const App = getApp(); 
Page({ 
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data: { // 数 据 初 始 化 
cartItems: [], 
total: 0, 
checkAll: true 
}, 
// 获 取 缓 存 中 的 数据 
onShow: function() { 
var cartItems = wx.getStorageSync("cartItems") 
this. setData( { 
cartList: false, 
CartItems: cartItems 
}) 
this. getsumTotal( ) 
}, 


// 选 中 图 标 
selectIcon: function(e) { 
var cartItems = this. data. cartItems // 获 取 购 物 车 列表 


var index = e.currentTarget. dataset. index; // 获 取 当 前 点 击 事件 的 下 标 索 引 
var selected = cartItems[ index]. selected;  // 获 取 购 物 车 里 面 的 value 值 
// 未 选中 图 标 
cartItems[ index]. selected = !selected; 
this. setData( { 
cartItems: CartItems 
]) 
this. getsumTotal( ); 
wx. setStorageSync("cartItems", cartItems) 


} 
// 增 加 商品 数量 
(e) { 


var cartItems = this. data. cartItems 


add: function 


Var index = 
Var value = 
Value++ 


e. currentTarget. dataset. index 
cartItems[ index]. value 


cartItems[ index].value = value 
this. setData( { 


CartItems : 


Ds; 


cartItems 


this. getsumTotal() 
wx. setStorageSync("cartItems", cartItems) 


}, 


// 减 少 商品 数量 


reduce: function(e) { 


var cartItems = this. data. cartItems 


var index = 
var value = 


e. currentTarget. dataset. index 
cartItems[ index]. value 


if (value == 1) { 


value ——; 
cartItems[ 
} else { 
value 一 一 
cartItems[ 


0 
上 


index]. value 


index]. value = value; 


this. setData( { 


CartItems : 


D); 


CartItems 


this. getsumTotal() 
wx. setStorageSync("cartItems", cartItems) 


}, 
// 全 选 


select: function(e) { 


var checkAll 
checkAll = 
Var cartItenm: 


for (var i = 0; i< cartItems. length; i++) { 


cartItems[ 


= this. data. checkAll; 
!checkAll 
ls = this. data. cartItems 


i]. selected = checkAll 


this. setData( { 


CartItems : 


cartItenms, 


CheckAll: checkAll 


}) 


this. getsumTotal() 


}, 


// 删 除 商品 列表 


delete: function(e) { 


Var cartItem 


Var index = 


S = this. data. cartItems; 
e. currentTarget. dataset. index; 


cartItems. splice( index, 1) 


// 存 人 缓存 
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this. setData( { 
cartItems: CartItems 
DD); 
证 (cartItems. length) { 
this. setData( { 
cartList: false 
]) 
} 
this. getsumTotal() 
wx. setStorageSync("cartItems", cartItems); 
}, 
// 清 空 购物 车 
clearcart: function(e) { 
this. setData( { 
cartItems: [], 
total: 0 
粹 
wx. setStorageSync("cartItems", []) 
}, 
// 跳 转 到 支付 页 面 
goPay: function(e) { 
Wx. setStorageSync("cartItems", this. data.cartItems) 
Wx. setStorageSync("total", this. data. total) 
wx. navigateTo( { 
url: '../../pages/pay/pay' 
}) 
}, 
// 合 计 商 品 总 价 
getsumTotal: function() { 
var cost = 0; 
for (var i = 0; i< this.data.cartItems.1length; i++) { 
if (this. data. cartItems[ i]. selected) { 
cost += this. data.cartItems[i].value * this.data.cartItems[i].price 
} 
} 
// 更 新 数据 
this. setData( { 
total: cost 
和 
}, 
}) 


pages/cart/cart.wxss 文件 代码 如 下 : 
/* 图标 外 部 样式 * / 


. icon 一 box { 
height: 250rpx; 
} 
/* 左边 选中 图 标 样式 x*/ 
.icon { 


float: left; margin: 88rpx 20rpx; 
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} 
/* 购物 车 商品 图 片 左 浮动 * / 
.left— image { 
float: left; 
} 
/* 购物 车 商品 图 片 样式 * / 
.addcart — image { 
width: 170rpx; height: 210rpx; float: left; padding: 10rpx; 
} 
/* 购物 车 商品 信息 左 浮动 */ 
.left— detail { 
float: left; margin 一 top: 20rpx; line— height: 60rpx; 
} 
/* 购物 车 商品 标题 样式 * / 


.cart — title { 


margin ~ top: 24rpx; font - size: 32rpx; 
} 
/* 购物 车 商品 价格 样式 * / 
.Cart — price { 
display: flex; color: #f£00; font— size: 20rpx; ; 
} 
/* 输入 框 样式 * / 
.input { 
display: block; width: 65rpx; 
height: 70rpx; line - height: 70rpx; 
text ~ align: center; float: left; 
} 
/* 购买 商品 数量 样式 * / 
.Cart — amount { 
width: rpx; background: # £4f4f4; font— size: 30rpx; 
} 
/* 删除 图 标 样式 * / 
.right image { 
width: 52rpx; height: 52rpx; 
float: right; margin 一 right: 34rpx; margin 一 top: 34rpx; 
} 
/* 底部 样式 */ 
.total — bottom { 
position: fixed; width: 100 %; 
height: 86rpx; bottom: 0; background: white; 
} 
/* 底 部 选中 图 标 样式 * / 
.cart 一 icon { 
margin: 15rpx 22rpx; float: left; 
/* 全 选 样式 */ 
.Checked—all { 
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line - height: 90rpx; font - size: 36rpx; 
} 
/= 合计 样式 */ 
.Cart— total { 
width: 300rpx; height: 100%; 
line - height: 86rpx; float: right; text- align: center; 
} 
/* 清空 购物 车 和 结算 图 标 样式 * / 
.Clear -cart { 
float: right; width: 230rpx; 
} 
/* 清空 购物 车 文字 样式 * / 
,clear 一 text { 
display: block; line - height: 87rpx; text - align: center; 
font - size: 36rpx; color: white; background: #f£00; 
} 
/* 结算 文字 样式 * / 
.pay { 
display: block; line ~ height: 87rpx; 
text - align: center; font— size: 36rpx; 
color: white; background: #ff8c00; 
} 
/* 合计 价格 样式 */ 
.total ~ color { 
color: 井 f00; font - size: 36rpx; 
} 
/x* 合计 内 容 样式 */ 
.total 一 text { 
font - size: 36rpx; 
} 
【代码 讲解 】 cart.js 文件 的 onload() 函数 通过 语句 var cartItems 一 wx 
.getStorageSync("cartItems") 从 数据 缓存 区 中 获取 购物 车 中 的 商品 数据 。 
cart.js 文件 中 的 select() 函 数 用 于 实现 单 件 商 品 的 选 与 不 选 ; selectIcon() 函 数 用 于 实 
现 单 件 商品 的 选 与 不 选 ; add() 函数 用 于 实现 用 户 点 击 “十 "按钮 时 商品 数量 增加 ; reduce() 
函数 用 于 实现 用 户 点 击 “ 一 ”按钮 时 商品 数量 减少 ; delete() 也 数 用 于 实现 用 户 点 击 圳 除 图 
标 时 将 当前 的 商品 从 购物 车 中 删除 ; clearcart() 函数 用 于 清空 购物 车 ; getsumTotal() 函数 
用 于 计算 购物 车 商品 的 总 价 ; goPay() 函数 用 于 实现 当前 页 面 跳 转 到 支付 页 面 。 


11.4 支付 页 面 的 设计 


在 购物 车 页 面 中 , 当 用 户 点 击 “ 结 算 ” 按 钮 后 将 跳 转 到 支付 页 面 。 支 付 页 面 的 运行 效果 
如 图 11.10 和 图 11.11 所 示 。 
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pages/pay/pay.wxml 文件 代码 如 下 : 


< view class = "list— text"> 
<text > 商品 列表 </text > 
</view> 


< view wx: if = "{{cartItems!= []}}"> 视频 讲解 
<view class = "list - goods" wx:for = "{{cartItems}}"> 
<! 一 -商品 展示 --> 
ic - goods" src="{{item. image}}"></image> 
= 


< image class 

<! 一 商品 名 称 

< text class = "title— goods">{{ item.title}}j</text > 

<! 一 -价格 图 标 和 商品 价格 -一 > 

< text class = "price — goods"> ¥ {{item. price} }</text > 

<! 一 删除 图 标 -一 > 

< text class = "amount - goods"> x {{item. value} }</text > 
</view> 


</view> 


<view class= "deliver"> 
<view> 
<view class = "sevice"> 配 送 服务 </view> 
<view class = "time"> 中 小 件 送 货 时 间 </view> 
</view> 
<view class = "time — select"> 
< picker mode = "time" bindchange = "timeChangel"> 
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< text > 配送 时 间 :{{timel}}</text > 
</picker > 
< picker mode = "time" bindchange = "timeChange2"> 
<text>— {{time2}}</text > 
</picker > 
</view> 
</view> 
<view class= "hr"></view> 
<view class = "remark"> 
<view> 备 注 </view> 
< input placeholder = " 选 填 : 给 商家 备注 (50 字 以 内 )" auto - focus ></input > 
</view> 
<view class = "cost - one"> 
< text class = "left"> 商 品 金额 </text > 
< text class = "right">¥ {{total}}</text > 
</view> 
<view class = "cost — two"> 
<text class = "left"> 运 费 </text > 
<text class = "right"> + ¥6</text> 
</view> 
< view class = "cost 一 three"> 
<text class = "left"> 实 际 付款 </text > 
<text class = "right">¥ {{total + 6}}</text> 


</view> 
< View class = "bottom"> 

< text > 微 信 支付 </text > 
</view> 


pages/pay/pay.js 文件 代码 如 下 : 


const App = getApp(); 
Page({ 
onLoad: function(options) { // 从 缓存 中 获取 购物 车 中 的 数据 
var cartItems = wx.getStorageSync("cartItems") 
var total = wx.getStorageSync("total") 
var payId = options. jd 
var data = App. globalData. data 
this. setData({ 
cartItems : cartItenms, 
total: total 
}) 
}, 
timeChangel: function(e) { // 选 择 配送 时 间 
var valuel = e.detail.value; 
this. setData({ 
timel : valuel 
]) 
}, 
timeChange2: function(e) { 
Var value2 = e.detail.value; 
this. setData( { 
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time2: value2 
DD); 
到 
}) 


pages/pay/pay.wxss 文件 代码 如 下 : 


/* 商品 列表 */ 
siet= towt 
height: 84rpx; line - height: 84rpx; 
font - size: 32rpx; padding — left: 32rpx; 
} 
/* 商品 列表 外 部 样式 * / 
.list— goods { 
position: relative; 
padding: 10rpx 10rpx 10rpx 220rpx; 
height: 190rpx; 
border — bottom: 1px solid # eee9e9; 
} 
/x* 商品 图 片 */ 
,pic - goods { 
Position: absolute; top: 20rpx; 
left: 20rpx; width: 200rpx; height: 180rpx; 
} 
/* 商品 标题 * / 
.上 title 一 goods { 
display: block; font- size: 34rpx; 
} 
/* 商品 价格 * / 
.price 一 goods { 
font - size: 32rpx; height: 100rpx; color: #f£00; 
} 
/x* 商品 数量 * / 
.amount ~ goods { 
position: absolute; right: 10rpx; 
bottom: 20rpx; width: 90rpx; 
height: 90rpx; line - height: 90rpx; 
text ~ align: center; font ~ size: 30rpx; 
} 
/* 配送 服务 外 部 样式 * / 
.deliver { 
display: flex; flex— direction: row; 
height: 50rpx; padding: 30rpx; 
} 
/* 分 隔 线 样式 */ 
.hr { 
margin 一 top: 20rpx; border: 1px solid # eee9e9; 
} 
/* 配 送 服务 内 容 样式 * / 
.deliver . sevice { 


font - size: 34rpx; 
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} 
/* 中 小 件 送 货 时 间 内 容 样式 * / 


.deliver .time { 


margin ~ top: 10rpx; font — size: 26rpx; color: #919191; 
} 
/* 配送 时 间 外 部 样式 */ 
,time 一 select { 
display: flex; flex- direction: row; 
margin 一 top: 42rpx; margin 一 Jeft: 240rpx; 
} 
/* 配 送 时 间 内 容 样式 * / 
.time— select text { 
font - size: 26rpx; color: #919191; 
} 
/* 备注 外 部 样式 */ 
.remark { 
font - size: 34rpx; height: 50rpx; padding: 30rpx; 
} 
/* 输入 框 样式 */ 
.remark input { 
font - size: 28rpx; 
} 
/* 商品 金额 外 部 样式 * / 
.cost 一 one { 
margin ~ top: 36rpx; height: 30rpx; line - height: 30rpx; 
} 
/* 商品 金额 内 容 样式 * / 
.cost — one .left { 
float: left; font - size: 30rpx; padding — left: 32rpx; 


/x* 商品 金额 价格 样式 * / 
.Cost 一 one .right { 
float: right; color: #f£00; font - size: 32rpx; padding - right: 22rpx; 


/* 运费 外 部 样式 */ 
.cost 一 two { 
height: 80rpx; line - height: 80rpx; 


/* 运 费 内 容 样式 */ 
.Cost— two .left { 
float: left; font - size: 30rpx; padding — left: 32rpx; 


/* 运 费 价格 样式 * / 

.cost 一 two .right { 

float: right; color: #£00; 

font — size: 32rpx; padding — right: 22rpx; 


/* 实际 付款 外 部 样式 */ 
.Cost— three { 

height: 20rpx; line - height: 20rpx; 
} 
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/* 实 际 付款 内 容 样式 * / 
.cost 一 three . left { 
float: left; font - size: 30rpx; padding — left: 32rpx; 
} 
/* 实 际 付款 价格 样式 * / 
.cost -three .right { 
float: right; color: #f00; 
font - size: 32rpx; padding — right: 22rpx; 
} 
/* 底 部 */ 
.bottom { 
width: 100 %; height: 105rpx; 
line— height: 105rpx; background: #1aad19; 
position: fixed; bottom: 0; 
color: white; font - size: 32rpx; text ~ align: center; 


} 

支付 页 面 的 运行 效果 如 图 11.10 所 示 , 图 11.11 是 支付 页 面 选 择 配送 时 间 的 界面 。 

【代码 讲解 】 pay.js 文件 的 onload() 函数 使 用 语句 var cartltems 一 wx 
.getStorageSync("cartItems") 获 取 数 据 缓 存 区 的 购物 车 商品 数据 ; 使 用 语句 var total = 
wx.getStorageSync("total") 获 取 数 据 缓 存 中 的 总 金额 。pay.wxml 页 面 中 使 用 wx:for 一 
"{{cartItems)})" 列 表演 染 显 示 购 物 车 中 的 商品 信息 ; 使 用 < picker > 组 件 选 择 送 货 时 间 ; 使 
用 < input > 组 件 添加 订单 的 备注 信息 。 


11.5 项 目 小 结 


通过 数码 产品 类 电 商 小 程序 实 训 项 目 主要 复习 了 以 下 知识 点 和 操作 : 
。 项 目的 创建 步骤 ; 

。 注册 新 页 面 ; 

。 从 app.js 文件 中 获取 数据 的 方法 ; 

。 页 面 布局 和 样式 设计 的 基本 方法 ; 

。 使 用 双 大 括号 {{)} 实 现 WXML 和 JS 文 件 的 数据 绑 定 操作 ; 

。 使 用 setData() 重 置 动态 数据 的 方法 ; 

。 wx: 计 条 件 泻 染 和 wx:for 列表 这 染 的 使 用 ; 

。 页 面 跳 转 中 数据 的 传递 ; 

数据 缓存 的 使 用 。 
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6.4 节 介 绍 了 基于 MySQL 数据 库 的 新 闻 小 程序 ,第 10 章 介绍 了 云 开发 ,本 章 将 使 用 云 
开发 改造 6.4 节 的 新 闻 小 程序 ,同时 也 在 6.4 节 的 基础 上 增加 了 一 些 功 能 模块 。 通 过 本 音 的 
学 习 , 读 者 可 以 使 用 云 开发 独立 完成 小 程序 项 目的 开发 。 

本 章 主 要 目标 

。 综合 应 用 所 学 知识 开发 完整 新 闻 小 程序 项 目 ， 

。 熟练 掌握 云 开发 在 项 目 中 的 应 用 ; 

。， 了 解 项 目 开发 中 的 软件 工程 方法 学 。 


12.1 需求 分 析 


本 项 目 一 共 需 要 5 个 页 面 , 即 新 闻 列 表 页 ,新闻 详情 页 ,个 人 主页 新闻 发 布 页 和 个 人 信 
息 设置 页 面 。 

(1) 新 闻 列 表 页 : 新 闻 列 表 页 应 包含 项 部 栏目 切换 导航 、 中 间 文 章 列表 部 分 和 底部 
tabBar 菜单 ,其 中 ,顶部 栏目 切换 导航 可 以 使 用 scroll-view 实现 ,中 间 文 章 列表 部 分 可 以 使 
用 wx:for 来 演 染 ,而 底部 tabBar 菜单 则 需要 在 app.json 文件 中 设置 。 顶 部 栏目 切换 导航 
包含 推荐“ 科技“ 财经“ 汽车“ 时尚" 等 目录 , 当 用 户 点 击 某 一 栏目 的 时 候 ,触发 JS 函数 
对 云 数 据 库 进行 对 应 栏目 文章 的 查询 操作 ,查询 结果 显示 在 中 间 文 章 列 表 部 分 。 底 部 
tabBar 菜单 包含 “首页 "和 “我 的 ”两 个 切换 菜单 。 

(2) 新 闻 详 情 页 : 新 闻 详 情 页 根据 用 户 在 首页 点 击 的 文章 的 id 条 件 查询 文章 的 title、 
cTime img 和 content 等 内 容 。 

(3) 个 人 主页 : 个 人 主页 包含 “关注 “粉丝 "和 “7 天 访问 ?等 信息 ,还 包含 “我 要 爆料 ”和 
“系统 设置 ”两 个 按钮 。 

(4) 新 闻 发 布 页 : 新 闻 发 布 页 实现 用 户 发 布 新 闻 的 功能 ,即将 数据 插入 云 数据 库 中 。 
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(5) 个 人 信息 设置 页 面 : 个 人 信息 设置 页 面 对 系 统 的 “字体 “自动 播放 ”和 “消息 推送 ” 
等 项 目 进行 设置 。 


12.2 云 存储 的 设计 与 实现 


云 开发 包含 云 存 储 、 云 数据 库 和 云 函 数 3 个 核心 功能 ,考虑 到 JS 函数 已 经 能 够 完成 项 
目 功能 ,本 项 目 没有 使 用 云 函数 ,只 使 用 了 云 存 储 和 云 数据 库 。 


12.2.1 云 存 储 在 本 项 目 中 的 意义 


微 信 小 程序 代码 容量 被 限制 为 不 超过 2MB, 限 制 大 小 是 出 于 对 小 程序 启动 速度 的 考 
虑 ,希望 用 户 在 使 用 任何 一 款 小 程序 时 ,都 能 获得 一 种 “ 秒 开 ” 的 体验 。 然 而 ,2MB 的 大 小 也 
限制 了 小 程序 功能 的 扩展 ,小 程序 业务 的 发 展 可 能 需要 更 大 的 体积 。 当 开发 者 开发 的 小 程 
序 超过 了 2MB 的 大 小 ,小 程序 将 不 可 以 真 机 调试 ,也 不 可 以 发 布 上 线 。 

突破 2MB 的 大 小 限制 的 方法 有 两 种 : 第 一 种 方法 是 采用 小 程序 提供 的 “分 包 加 载 ” 技 
术 , 关 于 “分 包 加 载 * 的 技术 实现 ,读者 可 以 自行 查询 ; 考虑 到 小 程序 中 最 占 空间 的 是 图 片 ， 
第 二 种 方法 则 是 采用 “ 云 存储 ”功能 把 项 目 中 的 图 片 存储 在 云端 ,从 而 降低 小 程序 的 容量 。 
本 例 将 使 用 “ 云 存储 "来 存储 项 目 中 的 新 闻 图 片 。 


12.2.2 云 存 储 的 设计 与 实现 


新 建 一 个 项 目 ch12, 如 图 12.1 所 示 。 在 AppID 下 拉 列 表 框 中 输入 真 
实 的 开发 者 AppID,“ 后 端 服 务 ” 选 项 选择 “小 程序 。 云 开发 " 单 选 按钮 , 单 击 
“新 建 ” 按 钮 完成 项 目的 创建 。 进 入 项 目 之 后 单 击 “ 云 开发 "菜单 进入 云 开 发 
控制 台 , 如 图 12.2 所 示 。 


项 目 名 称 ch12 
目录 。 “出 蔬 小 程序 写作 ch12\ch12 目 
ApplD ~ wx800eb4451b223c35 目 


专 无 Ap 下 可 注册 


™ | 


图 12.1 新 建 云 开发 项 目 
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目 加 
数据 库 存 鱼 
数据 库容 晤 


O00:e 


教 据 库存 储 分 布 


4 


区 售 
云 函 数 设置 


存储 容量 


0,. GB 0 


11 


wshwall ch12 


图 12.2 云 开发 控制 台 


在 云 开发 控制 台 单 击 “ 存 储 ” 菜 单 ,然后 在 出 现 的 界面 中 单 击 “ 新 建文 件 夹 ”按钮 新 建 
img 文件 夹 ,把 本 项 目 需 要 用 到 的 新 闻 图 片 全 部 上 传 到 img 文件 夹 中 ,效果 如 图 12.3 所 示 。 
图 片 的 File ID 即 是 项 目 中 需要 引用 的 图 片 地 址 。 


》 云 开发 控制 台 


全 部 文件 / img / 


文件 名 称 


bar 


D oo01.png 


口 oozpng 


D003.png 


D004.png 


口 oospng 


全 上 传 文件 | 误 新 建文 件 夹 


存储 管理 权限 设置 


FilelD 


cloud://mrchen201901.6d72-mrchen201901/img/001.png 


cloud://mrchen201901.6d72-mrchen201901/img/002.png 


cloud://mrchen201901.6d72-mrchen201901/img/003.png 


dloud://mrchen201901.6d72-mrchen201901/img/004.png 


cloud://mrchen201901.6d72-mrchen201901/img/005.png 
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图 12.3 


上 传 图 片 到 云 存储 空间 
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单 击 “ 权 限 设置 "按钮 ,选中 “所 有 用 户 可 读 , 仅 创建 者 可 读 写 " 单 选 按 钮 ,如 图 12.4 所 
示 。 至 此 ,项 目的 云 存储 部 分 操作 完毕 。 


》 去 开发 控制 
由 目 区 稳 当前 ”mrchen 
运营 分 析 数据 库 存储 云 函 数 设置 环境 
存储 管理 权限 设置 


云 控制 台 和 服务 端 始终 有 所 有 文件 读 写 权限 ， 以 下 配置 仅 对 小 程序 端 发 起 的 请 求 有 效 
权限 生效 需要 1- 3 分 钟 ， 请 耐心 等 待 


对 于 每 个 存储 文件 : 


加 所 有 用 户 可 读 ， 仅 创建 者 可 读 写 
适用 场景 : 用 户头 像 、 用 户 公开 相册 等 


仅 创建 者 可 读 写 
适用 场景 : 私密 相册 、 网 盘 文 件 等 
所 有 用 户 可 读 
适用 场景 : 文章 配 图 、 商 品 图 片 等 


所 有 用 户 不 可 读 写 
适用 场景 : 业务 日 志 等 


图 12.4 设置 云 存储 权限 


12.3 云 数 据 库 的 设计 与 实现 


本 项 目 中 新 闻 信 息 包含 的 字段 有 标题 (title) 、 发 布 时 间 (eTime) .新 闻 视频 讲解 


图 片 img) 、 新 闻 内 容 (content) 和 新 闻 类 别 (newsid) ,其 中 ,img 字段 为 12.2 节 中 云 存储 产 
生 的 云端 图 片 地 址 。 因 为 newsid 字段 是 小 程序 WXML 传递 给 JS 文件 的 string 类 型 的 id, 所 
以 本 例 中 newsid 设置 了 string 类 型 。 为 了 操作 方便 ,其 他 几 个 字段 也 设置 为 string 类 型 。 

单 击 云 开发 控制 台 的 “数据 库 ” 菜 单 ,新 建 集合 ch12, 然 后 添加 50 条 新 闻 记 录 , 如 
图 12.5 所 示 。 在 添加 记录 时 注意 newsid 的 取 值 范围 为 0 一 9, 分 别 代表 不 同 的 新 闻 类 别 。 


站 WE = 区 9 on 
HE 
= = -= 

wa 过 mao 
i 
二 003 jime™: “2019-07-10" 
省 n004 onlen/- -针对 -有 传言 称 中 方 将 派 宇 舰 赴 马 六 平 海 冉 对 本 国 般 只 位 行 护航 -， 外 交 部 发 言 人 几 赤 去 示 于 是 谣言 ， 

训 无 根据 -。 【环球 时 

人 Img-~ “coud://mrchen201901.6d72-mrchen201901/img/003png” 
es a 
广角 村 ile” "中 方 将 革 军 规 填 马六甲 海 赎 护航 本 国 船 只 ? 外 交 部 : 疡 言 !“ 
2 


图 12.5 ”添加 新 闻 记 录 
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在 添加 好 记录 之 后 ,把 云 数据 库 权 限 设置 为 "所 有 用 户 可 读 , 仅 创 建 者 可 读 写 ”, 如 图 12.6 


所 示 。 


12.4 


集合 名 称 


wishwall 


ne 


云 控制 台 和 服务 说 始终 有 所 有 数据 读 写 权限 ， 以 下 配置 仅 对 小 程序 锭 发 起 的 请 求 有 效 . 
对 于 集合 中 的 每 条 数据 记录 
人 QO 所 有 用 户 可 读 ， 仅 创建 者 可 读 写 

用 户 评论 、 用 户 公开 信息 等 


仅 创 建 者 可 读 写 

适用 场景 : 用 户 个 人 设 杜 、 用 户 订单 管理 等 
所 有 用 户 可 读 

适用 场景 : 商品 信息 等 

所 有 用 户 不 可 读 写 

适用 场景 : 后 台 流 水 数据 等 


图 12.6 设置 云 数据 库 权限 


小 程序 端的 实现 


12.4.1 


项 目 效 果 图 展示 


本 项 目的 项 目 结构 如 图 12.7 所 示 , 项 目 中 的 cloudfunctions| mrchen 文件 夹 是 创建 项 目 时 
自动 生成 的 ,img 文件 夹 下 存放 了 除 云 存 储 之 外 的 图 片 (app.json 文件 识别 不 到 云 存储 图 片 ,只 
能 使 用 本 地 图 片 ,pages 文件 夹 下 的 add、detail\list、me 和 setting 页 面 为 项 目 内 容 页 面 。 
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doudfunctions | mrchen 
v 巴 miniprogram 
vim 

» D bar 

回 puspng 
”DD pages 

>» Oad 

» D detai 

» Otist 
中 me 

» D seting 
» syle 
* 吕 utils 

8 appjs 
{) appjson 
ws app wxss 


{) sitemap son 
口 README md 
{%} project config json 


图 12.7 项 目 结构 
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list 页 面 效 果 如 图 12.8 和 图 12.9 所 示 ; me 页 面 效 果 如 图 12.10 所 示 ; detail 页 面 
效果 如 图 12.11 所 示 ; add 页 面 效 果 如 图 12.12 所 示 ; setting 页 面 效果 如 图 12.13 
所 示 。 


推荐 科技 则 经 汽车 时 尚 医 


中 方 将 派 军舰 赴 马 六 甲 海峡 
\ 护航 本 国 船只 ?外 交 部 : - 


2019-07-10 
各 地 扎实 开展 “不 忘 初 心 、 
四 让 记 使 命 ” 主 题 教育 


019-07-10 


"> 36 名 村 医 辞 职 后 又 曝 28 人 辞 
E 职 河南 通 许 全 县 排查 同类 .… 


2019-07-10 


肠 ， 杀 吉 章 莹 颖 的 凶手 会 被 判 死 
刑 吗 ? 


019-07-10 


全 非洲 大 陆 自 贸 区 正式 成 立 ， 


A 久 


首页 3 


图 12.8 list 页面 “推荐 栏目 


ee WeChats 1339 1 


基于 云 开发 的 新 闻 小 © 
推荐 科技 财经 汽车 时 尚 医 


上 靖 任 正 非 对 话 法 国 媒体 : 做 鸿 
蒙 不 是 为 了 取代 安 点 有 可 .… 
2019-( 10 


洪 望 | 借 力 华为 海 思 ,芯片 
代 工 之 王 台积电 安 度 “ 后 … 


2019-07-10 
登 月 50 年 | 为 何 前 苏联 没有 
能 力 将 人 类 送 往 月 球 ? 
2019-07-11 

三 只 松鼠 7 年 终 上 市 : VC 回 
报 超 300 倍 ， 章 粹 原 : 寻找 - 


2019-07-10 


WB 0 es 


A 2 
前 页 5 
图 12.9 list 页 面 “科技 ”栏目 


asee WeChats 


1000 
关注 


球 统 设置 
AN 里 
首页 El 
图 12.10 me 页 面 


& 
请 输入 文章 标题 
| 芯 
潜 望 | 借 力 华为 海 思 ， 芯片 代 工 清 输 入 编辑 资料 有 
之 王 台积电 安 度 “ 后 张 忠 谋 时 请 输入 文章 内 容 
化 ? 账号 和 绑 定 设置 > 
2019-07-10 
字体 大 小 中 > 
列表 是 否 显示 摘要 (人 
请 选择 文章 类 型 
扒 东 H&M 4 遇 非 WIFI 网 络 是 否 自动 播放 ( 
台积电 创始 人 张 忠 谋 与 华为 创始 人 任 正 人 mi 0) 尖 风 (OD 三 (D 才 育 () 体育 
非 两 位 风云 人 物 目前 只 见 过 一 次 面 。 一 位 台 请 上 传 图 片 贸 是 否 推送 通知 
积 电工 作 20 多 年 的 干部 告诉 腾讯 新 闻 《 潜 提交 
望 》， 会 面 发 生 在 2018 年 3 月 ， 张 忠 谋 一 行 检查 版 本 30.00 
多 人 到 华为 深圳 总 部 拜会 ，“ 任 正 非 非常 于 
视 ， 平 常 是 一 个 穿着 很 随意 的 人 ， 那 天 穿 了 
西装 。” 张 忠 谋 的 安排 中 ， 这 旦 一 未 对 项 和 
级 客户 的 交接 之 旅 。 半 导体 芯片 产业 链 主要 
图 12.11 detail 页 面 图 12.12 add 页 面 图 12.13 setting 页 面 
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由 


12.4.2 全 局 文件 的 实现 


app.js 的 代码 如 下 : 


App({ 
onLaunch: function() { 


wx. cloud. init({ 
traceUser: true 
]) 
this. globalData = {} 
} 
}) 


【代码 讲解 】 
本 项 目 因为 是 云 开发 项 目 , 所 以 需要 在 app.js 文件 中 使 用 wx.cloud.init() 进 行 初始 化 。 


app.json 的 代码 如 下 : 
{ 


"pages": [ 
"pages/list/list", 
"pages/setting/setting", 
"pages/add/add", 
"pages/detail/detail", 
"pages/me/me" 
], 
"window": { 
"backgroundColor" : "#F6F6F6", 
"backgroundTextStyle" : "light", 
"navigationBarBackgroundColor" : " # D53C3E", 
"navigationBarTitleText": "基于 云 开 发 的 新 闻 小 程序 "， 
"navigationBarTextStyle" : "white" 
}, 
"tabBar": { 
"selectedColor" : "#D53C3E", 
"borderStyle" : "black", 
"backgroundColor" : "#F9F9F9", 
ke 
{ 
"pagePath" : "pages/list/list", 
"text": "首页 "， 
"iconPath" : "/img/bar/index0. jpg", 
"selectedIconPath" : "/img/bar/index1. jpg" 
} 


"pagePath" : "pages/me/me", 

"text": "我 的 "， 

"iconPath" : "/img/bar/aboutme0. jpg", 
"selectedIconPath" : "/img/bar/aboutmel. jpg" 


}, 
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"sitemapLocation' 


} 


【代码 讲解 】 
app.json 文件 通过 tabBar 的 定义 ,控制 tabBar 菜单 在 list 和 me 页 面 中 显示 。 


12.4.3 ”其 他 页 面 的 实现 


pages/list/list.wxml 的 代码 如 下 : 


sitemap. json" 


< view class = "head"> 
<view class = "headl"> 
< scroll ~ view class = "scroll ~ view class" scroll ~- x= "true"> 
<view class = "scroll - view class"> 


<view> 
<view class = "{{flag == 0?'choose': 'nochoose'}}" 
id= "0" bindtap = "select"> 推 荐 </view > 
</view> 
<view> 
<view class = "{{flag == 1?'choose': 'nochoose’}}" 
id= "1" bindtap = "select"> 科 技 </view> 
</view> 
< View> 
< view class = "{{flag == 2?'choose':'nochoose'}}" 
id= "2" bindtap = "select"> 财 经 </view> 
</view> 
<view> 
<view class = "{{flag == 3?'choose': 'nochoose’}}" 
id= "3" bindtap = "select"> 汽 车 </view> 
</view> 
<view> 


<view class = "{{flag == 4?'choose': 'nochoose’}}" 
id= "4" bindtap = "select"> 时 尚 </view> 
</view> 
<view> 
<view class = "{{flag == 5?'choose': 'nochoose’}}" 
id= "5" bindtap = "select"> 图 片 </view> 
</view> 
<view> 
<view class = "{{flag == 6?'choose': 'nochoose’}}" 
id= "6" bindtap = "select"> 游 戏 </view> 
</view> 
<view> 
<view class = "{{flag == 7?'choose': 'nochoose’}}" 
id= "7" bindtap = "select"> 房 产 </view> 
</view> 
<view> 
<view class = "{{flag == 8?'choose': 'nochoose’}}" 
id= "8" bindtap = "select"> 教 育 </view> 
</view> 
<view> 
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< view class= "{{flag == 9?'choose': 'nochoose'}}" 
id= "9" bindtap = "select"> 体 育 </view> 
</view> 
</view> 
</scroll - view> 
</view> 
</view> 
< View class = "body"> 
<! 一 -文章 列表 模板 begin -一 > 
< template name = "itmes"> 
<navigator url = "../../pages/detail/detail?detail id= {{_id}}" hover - class= 
"navigator — hover"> 
<view class = "imgs">< image src="{{img}}" class= "in- img" background — size= 
"cover" model = "scaleToFill"></image ></view> 
<view class = "infos"> 
<view class = "title">{{title}}</view> 
<view class = "date">{{cTime} }</view> 
</view> 
</navigator > 
</template> 
<! 一 -文章 列表 模板 end-- > 
<! 一 循环 输出 列表 begin -> 
<view wx:for="{{shuzu}}" class = "list"> 
< template is = "itmes" data= "{{...item}}" /> 
</view> 
</view> 


【代码 讲解 】 

list.wxml 页 面 的 顶部 通过 scroll-view 组 件 实现 多 栏目 切换 ; 页 面 的 中 间 部 分 是 各 个 
栏目 的 列表 内 容 , 对 象 shuzu 是 JS 文件 通过 查询 云 数 据 库 获 取 符 合 条 件 的 文章 列表 内 容 。 
本 例 通过 wx:for 循环 浑 染 输出 文章 的 img title 和 cTime 字段 。 

pages/list/list.js 的 代码 如 下 : 


Page({ 
/ xxx 页 面 的 初始 数据 xx* / 
data: { 
shuzu: [], 
detail_id:"n001" 
}, 
/xx# 生命 周期 函数 -- 监听 页 面 加 载 x*x* / 
onLoad: function(options) { 
var that = this 
const db = wx.cloud. database() 
db. collection( 'ch12'). where({ 
newsid: "0" 
}).get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
shuzu: res. data 


}) 
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}) 
}, 
select :function(e) 
{ console. log(e) 
var that = this 
var id= e. target. jd 
const db = wx.cloud. database() 
db. collection( 'ch12').where({ 
newsid: id 
}).get({ 
success: function(res) { 
console. log(res. data) 
that. setData( { 
shuzu: res. data 
让 
} 
) 
}, 
/xxx 用 户 点 击 右 上 角 分 享 */ 
onShareAppMessage: function() { 
, 
}) 


【代码 讲解 】 


基于 云 开发 的 新 闻 小 程序 项 目 1 2 


当 用 户 没 有 在 list.wxml 选择 新 闻 栏 目 时 ,需要 自动 加 载 默认 推荐 的 新 闻 内 容 , 这 是 通 
过 JS 文件 的 onLoad 函数 自动 执行 对 云 数 据 库 ch12 的 条 件 查询 实现 的 ,查询 newsid 为 0 


的 记录 。 当 用 户 点 击 了 对 应 的 栏目 的 时 候 ,list.wxml 传递 给 
函数 查询 对 应 的 newsid 为 id 的 所 有 记录 。 
pages/list/list.wxss 的 代码 如 下 : 
. head{ 
background - color: #F6F5F3; 


color: #000000; 
flex— direction: row; 


height: 36px; 
display: flex; 


align ~ items: center; 


.headl{ 
width: 85 %; height: 36px; 


.SCroll - view class{ 
height: 40px; display: flex; 
flex— direction: row; margin— left:5px; 


.Choose{ 
width: 40px; height: 40px; 
line - height: 40px; padding - left: 5px; 


padding — right: 5px; font - size: 14px; font ~ weight: bold; 


.nochoose{ 
width:40px; height: 40px; 
line - height: 40px; padding - left: 5px; 


list.js 一 个 id 值 , 则 调用 select 
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padding — right: 5px; font — size: 14px; 
} 
.body{ 

height: 100 %; display: flex; 
flex- direction: column; padding: 20rpx; 

} 
navigator { overflow: hidden;} 
.list {margin - bottom: 20rpx;height: 200rpx;position: relative;} 
. imgs {float: left;} 
. imgs image {display: block; width: 200rpx;height: 200rpx;} 
. infos {float: left; width: 480rpx; height: 200rpx;padding: 20rpx 0 0 20rpx;} 
.title {font - size: 16px; overflow:hidden; 
text - overflow:ellipsis; 
display: — webkit — box; 
— webkit ~ box - orient:vertical; 
— webkit ~ line ~ clamp:2;} 
.date {font — size: 14px;color: #aaa; position: absolute;bottom: 0;} 
. loadMore {text - align: center;margin: 30px;color: #aaa;font - size: 16px} 
page{ 

background - color: #fdfeff; 
} 


pages/detail/detail.wxml 的 代码 如 下 : 


<! —— detail. wxml ——> 
<view class = "warp"> 
<view> 
<view class = "title">{{detail content.title}}</view> 
<view class = "cTime">{{detail content. cTime}}</view> 
<view class= "img">< image src = "{{detail_ content. img}}" class = " in- img" background — 
size = "cover" model = "scaleToFill"></image > </view> 
<view class = "content">{ {detail_content. content}}</view> 
<view class = "close" bindtap = "closepage"> 返回 </view> 
</view></view > 


【代码 讲解 】 detail.wxml 通过 数据 绑 定 的 方式 调用 detail.js 中 的 detail_content 对 象 ,并 
把 detail_content 对 象 的 title ecTime ,img 和 content 字段 在 页 面 中 显示 出 来 。 
pages/detail/detail.js 的 代码 如 下 : purer [a] 


var app = getApp() 
Page({ 
data: { 
idi: 1, 
detail content: {} 
}, 
onLoad: function(options) { 


console. log(options) 

var that = this 

var detail id = options. detail id; 

const db = wx.cloud. database() 

db. collection( 'ch12').doc(detail_id).get({ 
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success: function(res) { 
console. log(res. data) 
that. setData( { 
detail content: res. data 


}) 


}) 


【代码 讲解 】 

用 户 在 list.wxml 文件 中 点 击 了 某 一 条 新 闻 时 ,会 传递 一 个 id 值 给 detail.js,id 存储 在 
detail.js 的 onLoad 函数 的 option 事件 中 , 即 option.detail_id。 

pages/detail/detail.wxss 的 代码 如 下 : 


.warp { 
height: 100 %; display: flex; 
flex — direction: column; padding: 20rpx; 
font - size: 16px; 
} 
.title { 
text - align: center; padding: 20rpx; font - size: 20px; 
} 
.cTime { 
color: #aaa; 
} 
.img { 
text ~ align: center; padding: 20rpx; 
} 
.img image { 
width: 120px; height: 120px; 


.content { 
text — indent: 2em; 


.close { 
text - align: center; margin: 30px; 
font - size: 20px; color: #aaa 


page{ 
background - color: #fdfeff; 


pages/me/me.wxml 的 代码 如 下 : 


<view class = "all"> 
<view class = "top"> 
< view class = "topl"> 
<view class = "avatarUr1"> 
< image src = "{{fuserInfo. avatarUrl}}" style= "width:70px;height:70px;"></image> 
</view> 
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<view class = "nickName"> 
{{userInfo. nickName}} 
</view> 
</view> 
<view class= "top2"> 
<view class= "topitem"> 
<view> 1000 </view> 
<view> 关 注 </view> 
</view> 
< View class = "topitem"> 
<view> 500 </view> 
<view> 粉 丝 </view> 
</view> 
< View class = "topitem" style= "border:0px;"> 
<view> 3000 </view> 
<view> 7 天 访客 </view> 
</view> 
</view> 
</view> 
< View class = "part"></view> 
< View class = "mecontent"> 
< view class = "mefuntion" bindtap = 'mefuntion'> 我 要 爆料 </view > 
</view> 
<view class = "partl"></view> 
< view class = "mecontent”bindtap = "setup"> 
< View class = "mefuntion” bindtap = 'setup'> 系 统 设 置 </view> 
</view> 
</view> 


【代码 讲解 】 me. wxml 通过 数据 绑 定 的 方式 获取 me.js 中 的 userInfo 对 象 的 
avatarUrl 和 nickName 值 。 
pages/me/me.js 的 代码 如 下 : 


var app = getApp(); 
Page({ 
data:{ 
userInfo:{} 
}, 
onLoad :function( ){ 
var that = this 
wx. getUserInfo({ 


success: function(res) { 
that. setData( { 
userInfo:res. userInfo 
}) 
} 
}) 
}, 
mefuntion:function(e){ 
wx. navigateTo( { 
url: '../add/add', 


462 


第 12 章 。 基于 云 开发 的 新 闻 小 程序 项 目 12 


}) 
}, 
Setups unetian()t 
We avaterstl 
url: '../setting/setting', 
}) 
} 
}) 


【代码 讲解 】 me.js 在 onLoad 函数 中 调用 wx.getUserInfo() 接 口 获 取 用 户 信息 ,文件 
中 mefuntion 和 setup 函数 实现 用 户 点 击 之 后 的 跳 转 事件 。 
pages/me/me.wxss 的 代码 如 下 : 


.top{ 
width: 100 %; height: 150px; 
background - color: #D53E37; 
} 
.topl{ 
display: flex; flex— direction: row; 
} 
.topl image{ 
border - radius: 50 %; margin— left: 10px; 
} 
.nickName{ 
Color: #ffffff; font— size: 15px; 
position: absolute; left: 100px; margin — top:30px; 


.top2{ 
margin— top:10px; display: flex; flex- direction: row; 


.topitem{ 

width:33 %; text — align: center; 

font - size: 13px; color: #ffffff; 

line - height: 20px; border ~ right: 1px solid #¢cccccc; 


.part{ 
width:100 %; height: 15px; 
background - color: #F4F5F6; 


.mecontent{ 
display: flex; 
flex— direction: row; 


.partl{ 
border: 1px solid # cccccc; opacity: 0.2; 


.mefuntion{ 


font - size: lrem; 


pages/add/add.wxml 的 代码 如 下 : 
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< view class = "container"> 
<! -- <template is = "head" data= "{{ftitle: 'editor’}}"/> ——> 
<view class = "page - body"> 
< view class = 'wrapper'> 
< view class = "contentinfo"> 
请 输入 文章 标题 
</view> 
< view class = 'in'> < input bindinput = 'title' placeholder = "请 输入 ..." 
focus = "{{focus}}" /></view> 
< view class = "contentinfo"> 
请 输入 文章 内 容 


</view> 


< view class = 'in'>< textarea bindinput = "content" maxlength = "300" /></view> 
< view class = "contentinfo"> 
请 选择 文章 类 型 
</view> 
<view class = 'in'> 
< radio - group class = "radio - group" bindchange = "radioChange"> 
< label class = "radio" wx:for = "{{items}}"> 
< radio value = "{{item. name}}" checked = "{{item. checked}}"/>{ {itenm. value}} 
</label > 
</radio - group></view> 
<view> 
<view class = 'pic'> 
<view class = "contentinfo"> 
请 上 传 图 片 
</view> 
< view bindtap = 'picfunction'>< image class = "plus" src= '/img/plus.png'></image></view> 
</view></view> 
< button type = "primary” bindtap = 'submit'> 提 交 </button > 
</view> 
</view> 
</view> 


【代码 讲解 】 

用 户 在 add.wxml 页 面 输入 爆料 新 闻 的 title、content、img 和 newsid 字段 并 传递 给 add. 
js, 用 于 将 数据 插入 云 数 据 库 中 ,其 中 ,cTime 字段 由 add.js 字段 自动 产生 。 

pages/add/add.js 的 代码 如 下 : 


Page({ 
data: { 
title: "", content:"", 
newsid: "", img: "", cTime: "" 
items: [ 


{ name: '0'，value: ' 推 荐 ' }, { name: '1', value: ' 科 技 '，checked: 'true' }， 
{ name: '2'，value: ' 财 经 ' }, { name: '3', value: ' 汽 车 '}， 
{ name: '4'，value: ' 时 尚 ' }, { name: '5', value: ' 图 片 ' }， 
{ name: '6'，value: ' 游 戏 ' }，{ name: '7', value: ' 房 产 '}， 
{ name: '8'，value: ' 教 育 ' }，{ name: '9', value: ' 体 育 ' }， 


464 


} 
title:function(e){ 
console. log(e. detail. value) 
this. setData({ 
title: e. detail. value 
}) 
}, 
content: function(e) { 
console. log(e. detail. value) 
this. setData( { 
content: e. detail. value 
}) 
}, 
radioChange: function(e) { 
console. log(e. detail. value) 
this. setData( { 
newsid: e. detail. value 
}, 
picfunction:function() { 
var that = this 
Wx. chooseImage({ 
count: 1, 
sizeType: ['compressed'], 
sourceType: [ 'album'，'camera'],， 
Success: function(res) { 
console. log(res) 
wx. showLoading( { 
title: ' 上 传 中 '， 
}) 
const filePath = res.tempFilePaths[0] 
var timestamp = (new Date()).valueOf(); 
wx. cloud. uploadFile( { 


cloudPath: "img/" + timestamp + ".jpg" 


filePath: filePath, 
success: res =>{ 
console. log( '[ 上 传 文件 ] 成 功 : '，res) 
that. setData( { 
img:res. fileID 
}) 
}, 
fail:e =>{ 
console. error('[ 上 传 文件 ] 失败 : '，e) 
Wx. ShowToast({ 
icon: 'none', 
title: ' 上 传 失败 '， 
}) 
}, 
complete: () =>{ 
wx. hideLoading( ) 
} 
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// 待 插入 的 文章 title 字段 


// 待 插入 的 文章 content 字段 


// 待 插入 的 文章 newsid 字段 


// 选 择 图 片 


,// 上 传 至 云端 的 路 径 


// 小 程序 临时 文件 路 径 


// 待 插入 的 文章 ing 字段 
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]) 
}, 
fail:e =>{ 
console. error(e) 
} 
}) 
}, 
submit :function(e){ 
var that = this 
var newDate = new Date( ); 
that. setData( { 
cTime: newDate. getFullYear() + "一 "+ newDate. getMonth() + "一 "+ newDate.getDay() 
}) 
const db = wx.cloud. database() 
db. collection( 'ch12').add({ // 插 和 新闻 信息 
data: { 
title: that. data. title, 
content: that. data. content, 
newsid: that. data. newsid, 
img: that. data. img, 
cTime: that. data. cTime 
}, 
success: function(res) { 
//res 是 一 个 对 象 , 其 中 有 _id 字段 标记 刚 创建 的 记录 的 id 
console. 1og(" 捅 入 成 功 " + res) 
} 
fail: console. error 
}) 
} 
}) 


【代码 讲解 】 add.js 中 的 title、content 和 radioChange 函数 负责 获取 用 户 在 add 
.wxml 输 入 的 title、content 和 newsid 字段 的 值 ; picfunction 函数 调用 wx.chooseImage() 
接口 上 传 本 地 图 片 到 云 存 储 空间 ; submit 函数 实现 自动 产生 一 个 cTime 字段 ,并 把 title、 
content ,newsid img 和 cTime 等 字段 插入 云 数 据 库 中 。 

pages/add/add.wxss 的 代码 如 下 : 


.wrapper { 
padding: 5px; 
} 
. contentinfof 
font - size: lrem; 
} 
.iconfont { 
display: inline— block; padding: 8px 8px; 
width: 24px; height: 24px; 


cursor: pointer; font - size: 20px; 
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box- sizing: border — box; border — bottom: 0; 
font - family: 'Helvetica Neue', 'Helvetica', 'Arial', sans— serif; 
} 
.ql - container { 
box — sizing: border - box; padding: 12px 15px; 
width: 100 %; min- height: 30vh; height: auto; 
background: #fff; margin— top: 20px; 
font - size: 16px; line- height: 1.5; 
} 
.ql 一 active { 
color: #06c; 
} 
.in{ 
background — color: #fff; 
} 
input{ 
border:1px solid # 00F; 
font - size: lrem; width: 100 %; 


textarea{ 
border:1px solid #00F; 
font — size: lrem; width: 100 %; 


image{ 
height: 60rpx; width: 60rpx; margin~— left: 30rpx; 


.pic{ 
display: flex; flex- direction: row; 


pages/setting/setting.wxml 的 代码 如 下 : 


<view class = "head"></view> 
<view class = "element"> 
< view class = "content"> 编 辑 资料 </view> 
<view class = "right"> 
< text > ></text > 
</view> 
</view> 
<view class = "part"></view> 
<view class = "element"> 
<view class = "content"> 账 号 和 绑 定 设 置 </view> 
<view class = "right"> 
< text > ></text > 
</view> 
</view> 
<view class = "part"></view> 
<view class = "element"> 
<view class = "content"> 字 体 大 小 </view> 
<view class = "right"> 
<text > 中 ></text> 
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</view> 
</view> 
<view class = "part"></view> 
<view class = "element"> 
<view class = "content"> 列 表 是 否 显示 摘要 </view> 
<view class = "right"> 
< switch type = "switch" /> 
</view> 
</view> 
< view class = "part"></view> 
<view class = "element"> 
< view class = "content"> 非 WiFi 网 络 是 否 自 动 播 放 </view> 
<view class = "right"> 
< switch type = "switch" /> 
</view> 
</view> 
<view class = "part"></view> 
< view class = "element"> 
< view class = "content"> 是 否 推送 通知 </view > 
< View class = "right"> 
< Switch type = "switch" /> 
</view> 
</view> 
< View class = "part"></view > 
<view class = "element"> 
< view class = "content"> 检 查 版 本 </view> 
< View class = "right"> 
<text > 30.0.0 </text> 
</view> 
</view> 
< view class = "part"></view > 
<button class = "btn"> 退 出 登录 </button > 


pages/setting/setting.js 的 代码 如 下 : 


Page({ 
onLoad: function( ){ 
wx. setNavigationBarTitle( { 
title: ' 我 的 设置 '， 
}) 
} 
}) 


pages/setting/setting.wxss 的 代码 如 下 : 


.head{ 
width:100 %; height: 15px; 
background — color: #F4F5F6; 

} 

.element{ 
display: flex; flex- direction: row; 


} 
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.Content{ 
padding — top:15px; padding - bottom: 15px; 
padding — left: 15px; font — size: 15px; 
} 
.right{ 
font - size: 15px; position: absolute; 
right: 10px; height: 50px; 
line - height: 50px; color: #888888; 
} 
“part{ 
border: 1px solid #cccccc; opacity: 0.2; 
} 
.btn{ 
margin: 10px; color: #D53E37; 
} 


12.5 项 目 小 结 


通过 本 新 闻 小 程序 项 目的 实 训 主要 介绍 了 以 下 知识 点 和 操作 : 
。 云 开 发 小 程序 项 目的 创建 步 又; 

。 云 存储 的 操作 和 权限 设置 ; 

。 云 数据 库 的 操作 和 权限 设置 ; 

。 app.json 文件 中 tabBar 菜单 和 导航 栏 标 题 的 设置 方法 ; 

页 面 布 局 和 样式 设计 的 基本 方法 ; 

。 使 用 双 大 括号 {{)} 实 现 WXML 和 JS 文件 的 数据 绑 定 操作 : 
。 使 用 setData() 重 置 动态 数 据 的 方法 ; 

。 wx:for 条 件 泻 染 和 template 模板 的 使 用 ; 

。 函数 的 定义 ; 

。 云 数据 库 的 普通 查询 .条 件 查询 和 插入 操作 ; 

。 云 存储 的 代码 操作 ; 

。 wx.getUserInfo() 和 wx.chooseImage() 等 接口 的 使 用 ; 

。 textarea input radio-group 和 button 等 组 件 的 使 用 ; 

。 页 面 导 航 跳 转 用 法 ; 

。 WXML 和 JS 之 间 ,WXML 和 WXML 之 间 的 数据 传递 ; 

。 云 开发 控制 台 的 使 用 ,项 目 预览 和 真 机 调试 的 步骤 。 
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